/* ============================================================================
   tokens.css — the only file that may contain a raw brand hex.
   Everything else references the semantic role, never the literal color.

   THREE TEALS, THREE JOBS. They are not interchangeable, and the reason is
   measured contrast on white, not taste:

     #128575  --accent       4.53:1  fills, borders, icons, rings, the logo
                                     raster, gradient stops, and display type
                                     >=24px. This is the BRIGHTEST teal on this
                                     hue where WHITE TEXT ON THE FILL still
                                     passes 4.5:1 — #159B88 was tried first and
                                     put button labels at 3.46:1, because a
                                     "fill" that carries a label is text too.
     #0E7A66  --accent-text  5.26:1  every accent-coloured small text —
                                     eyebrow, outline-button label, selected
                                     segmented tab, wave-height pill, trial badge,
                                     footer tag/link hover. Passes 4.5:1.
     #3DE0C4  (dark accent)  1.60:1  DARK surfaces only. On white it is
                                     unreadable; allowed here solely as the
                                     far end of a decorative gradient.

   The seam to watch is the outline button: its BORDER is --accent and its
   LABEL is --accent-text. That is deliberate, not an oversight.
   ========================================================================== */

:root {
  /* ── Brand literals (source: fetch-marketing/BRAND_SYSTEM.md,
        lib/theme/fetch_theme.dart:115) ───────────────────────────────────── */
  --brand-teal:        #0E7A66;
  --brand-teal-bright: #3DE0C4;
  --brand-navy:        #0A1628;

  /* ── Accent roles ──────────────────────────────────────────────────────── */
  /* SPLIT, deliberately. --accent is the light-surface FILL/decoration value;
     --accent-text is what any small text uses. #159B88 measures 3.46:1 on
     white — fine for a fill or a border (UI needs 3:1), and a WCAG failure the
     moment it carries 13-15px text (needs 4.5:1). Large display type is the
     exception the spec already makes: >=24px only needs 3:1, so the hero word
     and the paywall motto stay on --accent. */
  --accent:            #128575;
  --accent-text:       #0E7A66;
  --accent-hover:      #0F7265;
  --accent-pressed:    #0D6054;
  --on-accent:         #FFFFFF;
  --accent-tint:       #EAF4F3;   /* derived from --accent */
  /* Recomputed from --accent, not left behind by it: #D2EDE4 was derived from
     the ORIGINAL #0E7A66 accent and survived two accent changes untouched,
     putting the trial badge at 4.25:1. A derived token that is not re-derived
     is just a stale literal. */
  --accent-tint-deep:  #E5F2F0;   /* --accent at 11% over white; badge text 4.58:1 */
  --accent-ring:       rgba(18, 133, 117, 0.30);

  /* Decorative only — see the header note. */
  --hairline-brand:    var(--brand-teal-bright);
  --gradient-brand:    linear-gradient(90deg, var(--accent) 0%, var(--brand-teal-bright) 100%);

  /* ── Surfaces ──────────────────────────────────────────────────────────── */
  /* ⚠ color-scheme IS NOT DECORATION — it is what makes the browser paint
     its own surfaces to match: the canvas before any CSS applies, scrollbars,
     text-selection, and every native form control. Without it a dark page
     gets light scrollbars and a white flash behind the first paint even when
     data-theme is already set. Declared here rather than in the generated
     theme-tokens.css because it is a web platform hint, not an app colour,
     and because tokens.css is the one stylesheet EVERY document loads —
     including privacy/terms, which load no other. */
  color-scheme: light;

  --bg:                #FFFFFF;
  --surface:           #F6F8F8;
  --surface-raised:    #FFFFFF;
  --surface-sunken:    #EDF1F1;
  --scrim:             rgba(10, 22, 40, 0.44);

  /* ── Lines ─────────────────────────────────────────────────────────────── */
  --line:              #E4EAEA;
  --line-strong:       #CDD7D7;

  /* ── Text ──────────────────────────────────────────────────────────────── */
  --text:              #0A1628;   /* 17.4:1 on white */
  --text-secondary:    #44555E;   /*  8.1:1 */
  /* #64757E passed on WHITE (4.79) and failed on every tinted surface it is
     actually used on — the nav search bar (4.49), the segmented track (4.21)
     and the selected plan card (4.27). Contrast is a property of the PAIR, and
     this token never sits only on white. #607079 clears 4.5 against all four. */
  --text-muted:        #607079;   /*  5.13 white / 4.82 surface / 4.51 sunken / 4.58 tint */
  --text-on-dark:      #E8F4F0;

  /* ── Type ──────────────────────────────────────────────────────────────── */
  --font-sans: 'Inter', system-ui, sans-serif;

  --fs-display:  clamp(2.5rem, 6.4vw, 4.5rem);
  --fs-h1:       clamp(2rem, 4.6vw, 3rem);
  --fs-h2:       clamp(1.5rem, 3vw, 2rem);
  --fs-h3:       1.175rem;
  --fs-body-lg:  1.0625rem;
  --fs-body:     1rem;
  --fs-sm:       0.9375rem;
  --fs-xs:       0.8125rem;
  --fs-eyebrow:  0.75rem;

  --fw-body:     400;
  --fw-medium:   500;
  --fw-label:    600;
  --fw-display:  800;

  --tracking-eyebrow: 0.16em;
  --tracking-tight:  -0.022em;

  /* ── Space (4px base) ──────────────────────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ── Radius ────────────────────────────────────────────────────────────── */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  22px;
  --r-pill: 999px;

  /* ── Elevation ─────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(10, 22, 40, 0.06), 0 1px 3px rgba(10, 22, 40, 0.04);
  --shadow-md: 0 4px 12px rgba(10, 22, 40, 0.07), 0 2px 4px rgba(10, 22, 40, 0.04);
  --shadow-lg: 0 18px 44px -18px rgba(10, 22, 40, 0.28);

  /* ── Layout ────────────────────────────────────────────────────────────── */
  --maxw:       1180px;
  --maxw-text:  760px;
  --nav-h:      68px;

  /* ── Motion ────────────────────────────────────────────────────────────── */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:  140ms;
  --dur:       220ms;
}

@media (max-width: 720px) {
  :root { --nav-h: 60px; }
}

/* ── The brandfield's ground ──────────────────────────────────────────────────
   ⚠ THIS WAS A HARDCODED #F2FAF8 IN TWO PLACES AND IT SURVIVED THE WHOLE OF
   SESSION 2, painting a pale teal band across the top of the dark home hero,
   the recommended section, and all eight overlay panels. It hid from every
   check for one reason: the brandfield paints with background-IMAGE, and a
   contrast probe that resolves an element's ground by walking ancestor
   background-COLOR sees straight through a gradient. The pairs over it were
   measured against the card underneath and passed honestly against the wrong
   surface. It was caught by sampling actual compositor pixels, where the mid
   -page pixel read #D2E5E3 on a page whose body was #0F1C2C.

   The fade TARGET was already themed (var(--bg)); only the top stop was
   fixed. So dark is the same gesture against the dark card — a teal-tinted
   navy — rather than a lightened copy of the light gradient.

   css/auth.css keeps its own --auth-field-* pair on purpose: that brandfield
   fades to --surface, not --bg, so it is a different ground and would need a
   different top stop to make the same gesture. */
:root {
  --bf-top: #F2FAF8;
  --bf-bot: var(--bg);
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --bf-top: color-mix(in srgb, var(--brand-teal-bright) 7%, var(--bg));
}