/*
 * Fronset design tokens — the ONE source of colour, type, space and motion values.
 * Canonical copy: docs/brand/tokens/fronset-tokens.css (see docs/brand/DESIGN_GUIDELINES.md).
 *
 * Copies live next to each surface's stylesheet and must stay byte-identical to this file:
 *   sites/fronset/assets/css/fronset-tokens.css
 *   sites/llm-bench/assets/css/fronset-tokens.css
 *   apps/service_portal/static/service_portal/css/fronset-tokens.css
 *
 * Rules that the values below encode:
 *   - Dark is the default theme on every web surface. Light exists for e-mail, print,
 *     and anything that must sit on a white page. Opt in with class="fs-light" or
 *     data-theme="light" on a container.
 *   - Lime means "the pick" (the chosen model, the saving, the passing value). Nothing else.
 *   - Lime FILL may sit behind dark text on any theme. Lime TEXT or thin lime LINES are
 *     allowed on dark only — on light use --fs-accent-text, which becomes olive ink.
 *   - No @font-face in this file: font paths differ per surface. Each surface ships its
 *     own fonts.css (see DESIGN_GUIDELINES.md §5).
 */

:root {
  /* ---- brand constants (never change per theme) ---- */
  --fs-lime: #D4F84A;          /* signal lime: the pick */
  --fs-lime-hover: #E2FB7A;    /* hover/active state of a lime fill */
  --fs-lime-ink: #4F6B00;      /* lime as text/lines on light backgrounds (5.7:1 on #F7F7F5) */
  --fs-ink: #0E0F11;           /* brand near-black */
  --fs-paper: #F7F7F5;         /* brand off-white */

  /* ---- surfaces (dark default) ---- */
  --fs-bg: #0E0F11;            /* page canvas */
  --fs-surface: #16181B;       /* cards, panels, table headers */
  --fs-surface-2: #1C1F23;     /* raised: code blocks, hover rows, inputs */
  --fs-border: #262A30;        /* hairlines, card borders */
  --fs-border-strong: #3A3F46; /* input borders, dividers that must be seen */
  --fs-hover: rgba(236, 234, 229, 0.06); /* hover tint over any surface */

  /* ---- text ---- */
  --fs-fg: #ECEAE5;            /* primary text, headings (15.9:1 on bg) */
  --fs-fg-2: #B9BDC3;          /* secondary text, lede, body on dense pages (10.2:1) */
  --fs-muted: #8A9098;         /* labels, captions, axis text (6.0:1) — minimum for text */
  --fs-faint: #5E636B;         /* disabled, decorative only — NEVER for text (3.2:1) */

  /* ---- accent (the pick) ---- */
  --fs-accent-fill: var(--fs-lime);        /* buttons, the picked bar, the 1.0x cell */
  --fs-accent-fill-hover: var(--fs-lime-hover);
  --fs-on-accent: var(--fs-ink);           /* text/icons ON a lime fill, every theme */
  --fs-accent-text: var(--fs-lime);        /* lime text/lines — flips to olive on light */
  --fs-accent-soft: rgba(212, 248, 74, 0.12); /* tinted background behind a picked row */

  /* ---- links ---- */
  --fs-link: var(--fs-fg);
  --fs-link-underline: var(--fs-border-strong);
  --fs-link-hover: var(--fs-accent-text);

  /* ---- states (colour is for exceptions; "ok" is deliberately NOT coloured) ---- */
  --fs-ok: var(--fs-fg);
  --fs-ok-soft: rgba(236, 234, 229, 0.08);
  --fs-warn: #F2B84B;
  --fs-warn-soft: rgba(242, 184, 75, 0.12);
  --fs-error: #FF6B5B;
  --fs-error-soft: rgba(255, 107, 91, 0.12);
  --fs-info: #8FB3FF;
  --fs-info-soft: rgba(143, 179, 255, 0.12);

  /* ---- data visualisation ---- */
  --fs-data-pick: var(--fs-accent-fill);   /* the cheapest model that clears the bar */
  --fs-on-data-pick: var(--fs-ink);        /* text on a --fs-data-pick fill (heat 1.0x cell) */
  --fs-data-qualifies: #565B63;            /* clears the bar but is not the pick */
  --fs-data-below: #33373D;                /* does not clear the bar */
  --fs-data-threshold: var(--fs-fg);       /* the "good enough" line (dashed) */
  --fs-data-grid: #1E2125;
  --fs-data-axis: var(--fs-muted);
  /* overpay heat — cost multiple vs the best-value model (1.0x uses --fs-data-pick) */
  --fs-heat-1: #1C1F23;  /* >1.05x – 2x   text: --fs-fg-2 */
  --fs-heat-2: #262A2F;  /* >2x – 4x      text: --fs-fg   */
  --fs-heat-3: #3A3226;  /* >4x – 8x      text: --fs-fg   */
  --fs-heat-4: #573F22;  /* >8x – 16x     text: --fs-fg   */
  --fs-heat-5: #7A4A1E;  /* >16x          text: --fs-fg   */
  --fs-heat-empty: #121417; /* model does not qualify — striped with --fs-border */

  /* ---- code ---- */
  --fs-code-string: #C9D69A;  /* strings in code samples: desaturated lime, never --fs-lime */

  /* ---- typography ---- */
  --fs-font-sans: "Inter", "InterVariable", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --fs-text-display: clamp(2.5rem, 5vw + 1rem, 4rem); /* 40–64px, marketing heroes only */
  --fs-text-h1: clamp(2rem, 2.5vw + 1rem, 2.75rem);   /* 32–44px */
  --fs-text-h2: 1.875rem;  /* 30px */
  --fs-text-h3: 1.375rem;  /* 22px */
  --fs-text-h4: 1.125rem;  /* 18px */
  --fs-text-body: 1rem;    /* 16px */
  --fs-text-small: 0.875rem; /* 14px */
  --fs-text-micro: 0.8125rem; /* 13px — mono labels, table meta. Nothing smaller. */
  --fs-leading-tight: 1.1;
  --fs-leading-snug: 1.3;
  --fs-leading-body: 1.6;
  --fs-tracking-display: -0.025em;
  --fs-tracking-heading: -0.015em;
  --fs-tracking-label: 0.04em;  /* uppercase mono labels only */

  /* ---- space (4px base) ---- */
  --fs-space-1: 4px;
  --fs-space-2: 8px;
  --fs-space-3: 12px;
  --fs-space-4: 16px;
  --fs-space-5: 24px;
  --fs-space-6: 32px;
  --fs-space-7: 48px;
  --fs-space-8: 64px;
  --fs-space-9: 96px;
  --fs-space-10: 128px;

  /* ---- layout ---- */
  --fs-max: 1200px;        /* marketing + benchmark content width */
  --fs-max-app: 1440px;    /* portal shell */
  --fs-max-prose: 720px;   /* docs/legal text column */
  --fs-gutter: 24px;       /* page side padding; 16px below 768px */
  --fs-header-h: 64px;

  /* ---- shape ---- */
  --fs-radius-sm: 6px;     /* inputs, buttons, chips */
  --fs-radius: 10px;       /* cards, code blocks, tables */
  --fs-radius-lg: 16px;    /* hero panels */
  --fs-border-width: 1px;

  /* ---- focus & motion ---- */
  --fs-focus-ring: 0 0 0 2px var(--fs-bg), 0 0 0 4px var(--fs-lime);
  --fs-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --fs-duration: 150ms;
}

/* ---- light theme: e-mail, print, white-page contexts ---- */
.fs-light,
[data-theme="light"] {
  --fs-bg: #F7F7F5;
  --fs-surface: #FFFFFF;
  --fs-surface-2: #F0F0EC;
  --fs-border: #E3E4E0;
  --fs-border-strong: #C9CBC4;
  --fs-hover: rgba(17, 18, 20, 0.04);

  --fs-fg: #111214;
  --fs-fg-2: #3A3D42;
  --fs-muted: #6B7079;
  --fs-faint: #A3A7AD;

  --fs-accent-text: var(--fs-lime-ink);
  --fs-accent-soft: rgba(212, 248, 74, 0.28);

  --fs-warn: #9A5B00;
  --fs-warn-soft: #FDF3E1;
  --fs-error: #B42318;
  --fs-error-soft: #FDECEA;
  --fs-info: #2F4BD8;
  --fs-info-soft: #EEF1FD;
  --fs-ok-soft: rgba(17, 18, 20, 0.05);

  --fs-data-pick: var(--fs-lime-ink);  /* lime fill is too faint on white for a data mark */
  --fs-on-data-pick: #FFFFFF;          /* white on the olive pick fill */
  --fs-data-qualifies: #A3A7AD;
  --fs-data-below: #D6D8D3;
  --fs-data-grid: #ECEDE9;
  --fs-heat-1: #F2F2EE;
  --fs-heat-2: #E8E6DF;
  --fs-heat-3: #F1DDBF;
  --fs-heat-4: #E9C08A;
  --fs-heat-5: #D99A55;
  --fs-heat-empty: #F7F7F5;
  --fs-code-string: #4F6B00;

  --fs-focus-ring: 0 0 0 2px var(--fs-bg), 0 0 0 4px var(--fs-lime-ink);

  /* ⚠ Re-declared on purpose. A custom property that references another one is resolved
     where it is DEFINED (:root) and inherited as a finished value, so without these lines
     a light container would inherit dark-theme links, axes and thresholds. Any new token
     defined as var(--other) in :root must be repeated here. */
  --fs-link: var(--fs-fg);
  --fs-link-underline: var(--fs-border-strong);
  --fs-link-hover: var(--fs-accent-text);
  --fs-ok: var(--fs-fg);
  --fs-data-threshold: var(--fs-fg);
  --fs-data-axis: var(--fs-muted);
}

@media (prefers-reduced-motion: reduce) {
  :root { --fs-duration: 0ms; }
}