/* Jeno Energy design tokens */
:root {
  /* Brand */
  --aubergine: #2C1B5C;
  --aubergine-700: #3A2774;
  --aubergine-800: #221547;
  --mint: #00C896;
  --mint-soft: #B9F0DF;
  --mint-bg: #E8F9F2;
  --peach: #E9B5A0;
  --peach-50: #F9ECE7;
  --peach-bg: #F4DFD5;
  --lime-olive: #BCC866;
  --lime-50: #EEF1D8;
  --lime-bg: #DDE3BD;
  --engine-bg: #ECE9F3;

  /* Neutrals (purple-tinted) */
  --n-50: #F9F9FA;
  --n-100: #F1F1F2;
  --n-200: #DFDEE1;
  --n-300: #BDBCC2;
  --n-400: #96939E;
  --n-500: #706D78;
  --n-600: #4F4D55;
  --n-700: #36353A;
  --n-800: #222125;
  --n-900: #131315;

  /* Semantic */
  --pass: #00AA7F;
  --warn: #D99F17;
  --fail: #C9384A;

  --font-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

.jeno-root {
  font-family: var(--font-sans);
  color: var(--aubergine);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  line-height: 1.4;
  background: #fff;
}

.jeno-root .mono { font-family: var(--font-mono); font-feature-settings: normal; letter-spacing: -0.01em; }

.jeno-root h1, .jeno-root h2, .jeno-root h3, .jeno-root h4 {
  margin: 0;
  letter-spacing: -0.022em;
  color: var(--aubergine);
  font-weight: 700;
  line-height: 1.05;
}

.jeno-root p { margin: 0; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 22px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aubergine);
  font-weight: 500;
  line-height: 1.3;
}
.eyebrow-mobile {
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aubergine);
  font-weight: 500;
  line-height: 1.35;
}
.eyebrow-lg {
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aubergine);
  font-weight: 500;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: 120ms ease;
  white-space: nowrap;
  text-decoration: none;
}
.btn-mint { background: var(--mint); color: var(--aubergine); }
.btn-mint:hover { background: #00B287; }
.btn-outline-aub { background: transparent; color: var(--aubergine); border-color: var(--aubergine); }
.btn-outline-aub:hover { background: var(--aubergine); color: #fff; }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.btn-outline-light:hover { background: rgba(255,255,255,0.08); }

.placeholder-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--n-500);
  border: 1px dashed var(--n-300);
  background: var(--n-50);
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.section-rule {
  height: 1px;
  background: var(--n-200);
}

/* Subtle striped placeholder pattern */
.stripes {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(44, 27, 92, 0.04) 0 1px,
    transparent 1px 12px
  );
}
.stripes-dark {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,0.05) 0 1px,
    transparent 1px 12px
  );
}

/* Pass/fail chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
  font-weight: 500;
}
.chip-pass { background: rgba(0, 200, 150, 0.15); color: var(--mint); }
.chip-pass-light { background: rgba(0, 170, 127, 0.12); color: var(--pass); }
.chip-warn { background: rgba(217, 159, 23, 0.12); color: var(--warn); }
.chip-fail { background: rgba(201, 56, 74, 0.12); color: var(--fail); }
.chip-neutral { background: rgba(255,255,255,0.08); color: var(--n-300); }

/* Dot for status */
.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }