/* ══════════════════════════════════════════════════════════════════════════
   Batch — Terminal theme token layer.

   The theme is a dark retune of a light "blueprint" system: only the token
   layer differs between the two, so every component below reads variables and
   never a literal. Adding the light theme later means adding one block here.

   Source: design_handover/README.md § Design tokens.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* — ground — */
  --color-bg: #0e1013;          /* page ground */
  --color-surface: #15181d;     /* input fills, the "how it works" band */
  --color-text: #e6e9ee;        /* body and heading text */
  --color-accent: #66d99a;      /* the only accent hue in the system */
  --color-divider: #262b33;     /* every hairline border and frame */

  /* — accent ramp (green) — */
  --color-accent-100: #14261d;
  --color-accent-200: #1c3a2a;
  --color-accent-300: #2a5c42;
  --color-accent-400: #3b8560;
  --color-accent-500: #4fae7d;
  --color-accent-600: #5cc78e;
  --color-accent-700: #66d99a;
  --color-accent-800: #8ae7b6;
  --color-accent-900: #15181d;

  /* — neutral ramp — */
  --color-neutral-100: #1a1e24;
  --color-neutral-200: #232830;
  --color-neutral-300: #2f3540;
  --color-neutral-400: #454c58;
  --color-neutral-500: #5f6a78;
  --color-neutral-600: #8d97a5;
  --color-neutral-700: #a4adba;
  --color-neutral-800: #c6ccd6;
  --color-neutral-900: #e6e9ee;

  /* — semantics —
     Losses are muted, not alarming: negatives are grey, never red. Sign and
     value carry the meaning; colour only reinforces it. */
  --color-positive: var(--color-accent-700);
  --color-negative: var(--color-neutral-700);
  --color-muted: var(--color-neutral-600);
  --color-body-2: var(--color-neutral-700);
  --color-body-1: var(--color-neutral-800);

  /* Rules inside tables and lists sit lighter than the frame divider. */
  --color-rule: rgba(230, 233, 238, 0.10);
  --color-row-hover: rgba(230, 233, 238, 0.05);
  --color-hover-wash: rgba(230, 233, 238, 0.07);
  --color-active-wash: rgba(230, 233, 238, 0.14);
  --color-input-hover: rgba(230, 233, 238, 0.45);

  /* Chart ink. One hue, one fill opacity band. */
  --chart-line: var(--color-accent);
  --chart-line-down: var(--color-neutral-500);
  --chart-fill-opacity: 0.10;
  --chart-grid: rgba(230, 233, 238, 0.10);
  --chart-baseline: rgba(230, 233, 238, 0.25);

  /* — type — */
  --font-heading: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  --font-heading-weight: 600;

  /* Role sizes. Desktop first; the mobile block below retunes the four that
     change. Everything else is set at the component. */
  --fs-hero: 82px;
  --fs-page-title: 64px;
  --fs-h2: 44px;
  --fs-h2-sm: 30px;
  --fs-card-title: 22px;
  --fs-stat: 30px;
  --fs-body: 15px;
  --fs-lede: 19px;
  --fs-table: 14px;
  --fs-figure: 12.5px;
  --fs-kicker: 11px;

  /* — spacing (0.85× density scale) — */
  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --gutter: 48px;

  /* — geometry —
     Square everywhere. This is a rule of the system, not a default. */
  --radius: 0;
  --border: 1px solid var(--color-divider);

  /* — the registration-mark frame — */
  --mark-size: 11px;
  --mark-inset: -6px;
  --mark-color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

@media (max-width: 720px) {
  :root {
    --fs-hero: 46px;
    --fs-page-title: 30px;
    --fs-h2: 30px;
    --fs-h2-sm: 26px;
    --fs-card-title: 19px;
    --fs-stat: 22px;
    --fs-body: 13px;
    --fs-lede: 15px;
    --gutter: 18px;
  }
}