/* ──────────────────────────────────────────────────────────────────────────
   KIWI tokens.

   Palette: rhea / Allergan Aesthetics, Blocks Design System V2, as ported on
   2 Nov from rhea `feat/design-system-v2-look` @ 0d267107 (the ramps below
   are unchanged). Everything else follows the 5 Nov redesign plan
   (~/Docs/kiwi/redesign-vercel/PLAN.md): a Vercel-led system of hairlines,
   tonal surfaces, one sans and one mono, synthesised from Vercel, Linear,
   Stripe, Mintlify, Cloudflare and Material for MkDocs.

   One file, light-dark() pairs, theme chosen by color-scheme. The Worker
   sets data-theme from the kiwi-theme cookie, so the chosen theme paints
   first time without script. Requires Chrome/Edge 123+, Firefox 120+,
   Safari 17.5+.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light dark;              /* follow the OS until the user picks */
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

:root {
  /* ── Tier 1: V2 ramps (rhea common.colors.*). Only stops KIWI uses. ─────── */
  /* Cool Brown = rhea mediumBrown */
  --cb-100: #F6F0EF; --cb-300: #C29A94; --cb-500: #925C54; --cb-600: #754A43; --cb-700: #573732;
  /* Warm Brown = rhea darkBrown (NOT rhea warmBrown) */
  --wb-100: #E6CCCC; --wb-200: #C9A3A4; --wb-500: #492728; --wb-600: #3D2021; --wb-700: #2B1718;
  /* Terracotta = rhea beige */
  --tc-200: #F7E8E3; --tc-300: #F5E1DA; --tc-500: #F2D9D0; --tc-900: #372E2B;
  /* Cool Grey, plus four steps derived between rhea's for hairlines and the
     charcoal dark surfaces (rhea's dark page is pure black, which reads harsh
     at this density). */
  --cg-050: #F8F9F9; --cg-100: #F4F5F5; --cg-150: #E6E8E9; --cg-200: #D4D7D8; --cg-300: #B4B8BB;
  --cg-400: #949A9E; --cg-500: #7E868B; --cg-600: #61676B; --cg-700: #44484B; --cg-800: #2C2F31;
  --cg-850: #25282A; --cg-900: #1D1F20; --cg-950: #141516;
  /* AbbVie Blue */
  --ab-100: #BED1F9; --ab-200: #93B5F4; --ab-300: #6A97F1; --ab-500: #1B60E9; --ab-700: #0D3B96;

  /* ── Tier 2: semantic. light-dark(LIGHT, DARK). Contrast on --bg unless
        stated, recomputed for this file. ──────────────────────────────── */

  /* surfaces: elevation is a step lighter in dark, not a shadow */
  --bg:             light-dark(#FFFFFF, var(--cg-950));
  --bg-subtle:      light-dark(var(--cg-050), #191A1B);         /* footer, table head, code */
  --surface:        light-dark(#FFFFFF, var(--cg-900));         /* cards, tables */
  --surface-raised: light-dark(#FFFFFF, var(--cg-850));         /* dialogs, menus */
  --hover:          light-dark(rgb(29 31 32 / .04), rgb(244 245 245 / .05));
  --selected:       light-dark(var(--cb-100), rgb(194 154 148 / .14));

  /* text */
  --text:   light-dark(var(--cg-900), var(--cg-100));            /* 16.55 / 16.74 */
  --text-2: light-dark(var(--cg-600), var(--cg-200));            /*  5.74 / 12.63 */
  --text-3: light-dark(#676D71, #9AA0A4);                        /*  5.25 /  6.91; ≥ 4.61 on every status surface */

  /* brand: Cool Brown, the wordmark dot; active indicators and primary buttons */
  --accent:     light-dark(var(--cb-500), var(--cb-300));        /*  5.41 /  7.26 */
  --accent-ink: light-dark(var(--wb-500), var(--tc-300));        /* brand text: current tab, TOC active */
  --action:     light-dark(var(--cb-500), var(--tc-500));
  --action-hover: light-dark(var(--cb-600), var(--tc-300));
  --on-action:  light-dark(#FFFFFF, #000000);                    /*  5.41 / 15.61 */

  /* links and focus: AbbVie Blue, rhea's link colour */
  --link:       light-dark(var(--ab-500), var(--ab-300));        /*  5.39 /  6.36 */
  --link-hover: light-dark(var(--ab-700), var(--ab-100));
  --focus:      var(--link);                                     /* ≥ 4.26 on every surface */

  /* borders */
  --border:         light-dark(var(--cg-150), var(--cg-800));    /* hairlines, decorative */
  --border-strong:  light-dark(var(--cg-200), var(--cg-700));    /* table head rule, inputs at rest */
  --border-control: light-dark(#8A9094, #6E7579);                /* control edges that must reach 3:1: 3.23 / 3.90 */

  /* ── Status: the owner's palettes (5 Nov), used exactly. Per status:
        surface = card fill, container = button/chip fill, on = text on the
        container, strong = outline and status label. ──────────────────── */
  --done-surface: light-dark(#EDF8EE, #203B28); --done-container: light-dark(#D0EFD4, #005521);
  --done-on:      light-dark(#005521, #D0EFD4); --done-strong:    light-dark(#187B38, #9CE6AC);
  --wait-surface: light-dark(#FFF6E5, #403115); --wait-container: light-dark(#FFE3B0, #634100);
  --wait-on:      light-dark(#634100, #FFE3B0); --wait-strong:    light-dark(#8A5D00, #FFD17B);
  --stop-surface: light-dark(#FFEDEA, #441F1B); --stop-container: light-dark(#FFDAD6, #93000A);
  --stop-on:      light-dark(#93000A, #FFDAD6); --stop-strong:    light-dark(#BA1A1A, #FFB4AB);
  --none-surface: light-dark(#F2F3F5, #2E3034); --none-container: light-dark(#E2E4E8, #484A50);
  --none-on:      light-dark(#454750, #E2E4E8); --none-strong:    light-dark(#737680, #B9BCC5);
  /* iac: Workers last deployed by Terraform */
  --iac-surface:  light-dark(#F5EDFF, #352448); --iac-container:  light-dark(#E9DDFF, #623C91);
  --iac-on:       light-dark(#623C91, #E9DDFF); --iac-strong:     light-dark(#7950A5, #D7BAFF);
  /* info, for notes and the "needs info" glyph's neighbours: AbbVie Blue */
  --info-surface: light-dark(#F1F5FE, #141D33); --info-container: light-dark(var(--ab-100), #1E3A75);
  --info-on:      light-dark(var(--ab-700), var(--ab-100)); --info-strong: light-dark(var(--ab-500), var(--ab-300));

  /* Overview hero: the grid and the two-colour glow, after docs.pdcoe.dev's
     home hero, in KIWI's Cool Brown and AbbVie Blue. */
  --grid-line: light-dark(rgb(29 31 32 / .06), rgb(244 245 245 / .06));
  --hero-a:    light-dark(rgb(146 92 84 / .16), rgb(194 154 148 / .22));
  --hero-b:    light-dark(rgb(27 96 233 / .10), rgb(106 151 241 / .16));

  /* elevation: hover and overlays only, plus the hero badge's hairline lift.
     light-dark() takes colours only, so the shadow colours are split out. */
  --shadow-key:  light-dark(rgb(29 31 32 / .04), rgb(0 0 0 / .3));
  --shadow-near: light-dark(rgb(29 31 32 / .14), rgb(0 0 0 / .6));
  --shadow-far:  light-dark(rgb(29 31 32 / .24), rgb(0 0 0 / .7));
  --shadow-sm: 0 1px 2px var(--shadow-key);
  --shadow-md: 0 1px 2px var(--shadow-key), 0 8px 24px -8px var(--shadow-near);
  --shadow-lg: 0 2px 4px var(--shadow-key), 0 20px 48px -16px var(--shadow-far);
  --scrim: light-dark(rgb(20 21 22 / .32), rgb(0 0 0 / .55));

  /* ── Scales ─────────────────────────────────────────────────────────── */
  --sp-2: 2px; --sp-4: 4px; --sp-6: 6px; --sp-8: 8px; --sp-10: 10px; --sp-12: 12px; --sp-16: 16px;
  --sp-20: 20px; --sp-24: 24px; --sp-32: 32px; --sp-48: 48px; --sp-64: 64px;
  --r-sm: 6px;          /* controls, nav items, tabs, chips */
  --r: 10px;            /* cards, code figures, tables, callouts */
  --r-lg: 16px;         /* dialogs */
  --r-full: 999px;      /* status tags */
  --bw: 1px; --bw-thick: 2px;

  /* type: Instrument Sans + JetBrains Mono, self-hosted (OFL). F37 Lineca,
     AbbVie's corporate face, is first but local-only: it has no @font-face
     and must never be bundled or hosted. */
  --ff-sans: "F37 Lineca", "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-h1: 2.25rem;     /* 36; 30 under 600px */
  --fs-h2: 1.5rem;      /* 24 */
  --fs-h3: 1.25rem;     /* 20 */
  --fs-body: 1rem;      /* 16 */
  --fs-sm: .875rem;     /* 14: working pages, UI */
  --fs-xs: .8125rem;    /* 13: meta, TOC */
  --fs-label: .75rem;   /* 12: section labels, table heads */
  --lh-body: 1.7;
  --lh-ui: 1.5;
  --measure: 42rem;     /* 672px ≈ 68 characters of 16px Instrument Sans */
  --page-max: 75rem;    /* 1200px */
  --gutter: 24px;
  --bar-h: 56px;

  /* motion: one ease-out curve, colour and border only */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: .15s; --dur: .2s;

  --z-header: 1000;
}

@media (max-width: 599.98px) {
  :root { --fs-h1: 1.875rem; --gutter: 16px; }
}