/* ============================================================
   ATLAS Design Tokens — single source of truth.

   Both web/index.html (landing) and web/app.html (app shell)
   reference these tokens via <link rel="stylesheet" href="/shared/tokens.css">.

   Do NOT redeclare any of these tokens in inline <style> blocks.
   See BRAND.md for usage guidance + intent.
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     COLORS
     ---------------------------------------------------------- */

  /* Surface / canvas.
     2026-07 contrast pass: the blossom photo shows its natural colors (the
     page overlay wash dropped from ~0.3/0.4 to ~0.08/0.16), and in exchange
     every glass surface got more opaque so text stays effortlessly readable
     on the livelier backdrop. Tune the pair together, never one side alone. */
  --bg: #edf1f4;
  --surface: rgba(255, 255, 255, 0.62);
  --surface-strong: rgba(255, 255, 255, 0.84);
  --surface-soft: rgba(255, 255, 255, 0.44);

  /* Text */
  --text: #0b0d10;
  --muted: #3f4854;
  --muted-soft: #8f98a3;

  /* Lines */
  --line: rgba(40, 55, 70, 0.16);
  --line-soft: rgba(63, 79, 95, 0.11);
  --line-strong: rgba(28, 43, 58, 0.28);

  /* Brand accent: sky (functional UI accent) */
  --sky: #229AD0;
  --sky-soft: rgba(34, 154, 208, 0.16);
  --sky-strong: #1A7AA8;

  /* Brand accent: blossom (soft decorative accent) */
  --blossom: #D5B3AF;
  --blossom-soft: rgba(213, 179, 175, 0.30);

  /* Legacy rose — aliased to blossom for backwards-compat */
  --rose: var(--blossom);
  --rose-soft: var(--blossom-soft);
  --rose-soft-strong: var(--blossom-soft);
  --rose-legacy: #c46072;

  /* Discord secondary */
  --discord: #4f5cd9;

  /* Semantic colors (non-text by default — see BRAND.md) */
  --success: #3D8B5F;
  --success-soft: rgba(61, 139, 95, 0.16);
  --danger: #B85040;
  --danger-soft: rgba(184, 80, 64, 0.16);
  --warning: #C9A347;
  --warning-soft: rgba(201, 163, 71, 0.18);
  --info: var(--sky);
  --info-soft: var(--sky-soft);

  /* Focus ring (uses sky-soft) */
  --focus-ring: var(--sky-soft);
  --control-border: rgba(40, 55, 70, 0.18);
  --control-border-strong: rgba(40, 55, 70, 0.30);
  --control-shadow: 0 6px 14px rgba(20, 30, 45, 0.06);
  --control-shadow-hover: 0 10px 24px rgba(20, 30, 45, 0.10);

  /* ----------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------- */

  /* Font stacks. Inter (legacy) + Montserrat (primary) loaded via shared/fonts.css */
  --font-head: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;

  /* Type scale (t-shirt sizes; display sizes use clamp() for responsive scaling).
     Compact scale 2026-07: operational sizes step down gently (body 13px),
     display sizes cut harder — density comes mostly from spacing, not type. */
  --text-2xs: 10px;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 15px;
  --text-xl: 18px;
  --text-2xl: 22px;
  --text-3xl: 27px;
  --text-display-2: clamp(23px, 2.7vw, 34px);  /* section h2 */
  --text-display-1: clamp(30px, 4.2vw, 52px);  /* hero h1 */

  /* Weight scale */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  /* Line-height scale */
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --leading-loose: 1.75;

  /* Letter-spacing scale */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.14em;  /* for uppercase nav anchors */

  /* ----------------------------------------------------------
     SPACING SCALE (4px base, geometric)
     ---------------------------------------------------------- */

  /* Compact scale 2026-07: ~25-30% tighter than the original 4px-geometric
     ramp; small steps stay even-numbered (2px grid) so chrome packs densely. */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 14px;
  --space-6: 16px;
  --space-8: 20px;
  --space-10: 24px;
  --space-12: 30px;
  --space-14: 36px;
  --space-16: 40px;
  --space-20: 52px;
  --space-24: 60px;
  --space-32: 80px;

  /* ----------------------------------------------------------
     RADIUS SCALE
     ---------------------------------------------------------- */

  --radius-tiny: 8px;
  --radius-small: 12px;
  --radius: 16px;
  --radius-large: 20px;
  --radius-pill: 999px;
  --radius-sm: var(--radius-tiny);
  --radius-md: var(--radius-small);
  --radius-lg: var(--radius);

  /* ----------------------------------------------------------
     CONTROL HEIGHTS (buttons, inputs, segmented, pills-with-height)
     Single source for interactive chrome so every control family
     sizes from the same compact system.
     ---------------------------------------------------------- */

  --control-height-lg: 36px;
  --control-height: 30px;
  --control-height-sm: 26px;
  --control-height-xs: 22px;

  /* Inset between a .switch (40x24) and the inner edge of a pill wrapper that
     encloses it at --control-height. Derived, not chosen:
     (30 - 2x1px border - 24) / 2 = 2px. At exactly this value the switch's end
     cap (r=12) shares a center with the pill's inner cap (r=14), so the gap is
     a uniform 2px around the whole arc. Any other value breaks concentricity —
     at 0 the switch sits tangent to the border and visibly touches it. */
  --switch-inset: 2px;

  /* ----------------------------------------------------------
     SHADOW SCALE
     ---------------------------------------------------------- */

  --shadow-xs: 0 1px 2px rgba(20, 36, 54, 0.04);
  --shadow-sm: 0 2px 6px rgba(20, 36, 54, 0.08);
  --shadow-md: 0 6px 16px rgba(20, 36, 54, 0.10);
  --shadow-lg: 0 12px 32px rgba(20, 36, 54, 0.16);
  --shadow-xl: 0 18px 42px rgba(20, 36, 54, 0.20);
  --shadow-2xl: 0 24px 64px rgba(20, 36, 54, 0.24);

  /* Existing aliases — keep until pages migrate */
  --shadow: 0 24px 64px rgba(20, 36, 54, 0.18);
  --shadow-soft: 0 12px 32px rgba(20, 36, 54, 0.12);

  /* ----------------------------------------------------------
     BORDER WIDTHS
     ---------------------------------------------------------- */

  --border-thin: 1px;
  --border-medium: 2px;
  --border-strong: 3px;

  /* ----------------------------------------------------------
     GLASS SURFACE TOKENS (existing, app uses these)
     ---------------------------------------------------------- */

  --glass-bg: rgba(255, 255, 255, 0.58);
  --glass-bg-strong: rgba(255, 255, 255, 0.85);
  --glass-bg-soft: rgba(255, 255, 255, 0.44);
  --glass-border: rgba(255, 255, 255, 0.66);
  --glass-border-strong: rgba(255, 255, 255, 0.84);
  --glass-highlight: rgba(255, 255, 255, 0.72);
  --glass-shadow: 0 18px 42px rgba(31, 48, 66, 0.15);
  --glass-shadow-soft: 0 8px 22px rgba(31, 48, 66, 0.10);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 -1px 0 rgba(94, 117, 140, 0.08);
  --glass-blur: blur(18px) saturate(140%);
  --glass-blur-soft: blur(10px) saturate(120%);
  --glass-focus: 0 0 0 3px var(--sky-soft);

  /* ----------------------------------------------------------
     MOTION
     ---------------------------------------------------------- */

  /* Motion — 3 durations × 1 easing */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);

  /* ----------------------------------------------------------
     BREAKPOINTS (named; CSS variables can't be used in @media queries directly,
     but these document the canonical breakpoint values for JS + design reference)
     ---------------------------------------------------------- */

  --bp-mobile: 480px;
  --bp-tablet: 760px;
  --bp-desktop: 1100px;
  --bp-wide: 1440px;

  /* ----------------------------------------------------------
     Z-INDEX SCALE
     ---------------------------------------------------------- */

  --z-base: 0;
  --z-content: 1;
  --z-sticky: 10;
  --z-overlay: 100;
  --z-modal: 1000;
  --z-toast: 5000;

  /* ----------------------------------------------------------
     OPACITY SCALE (named, for consistent treatment)
     ---------------------------------------------------------- */

  --opacity-faint: 0.08;
  --opacity-soft: 0.30;
  --opacity-medium: 0.50;
  --opacity-strong: 0.80;

  /* ----------------------------------------------------------
     SEMANTIC SURFACE/INK LADDER (2026-07 dark-mode prep)
     Light values are byte-exact captures of the literals they
     replaced across app.html + primitives.css; the dark theme
     overrides these as a set. Do not consolidate values without
     re-verifying the light fingerprint.
     ---------------------------------------------------------- */
  --active-glass-top: rgba(255,255,255,0.70);
  --active-glass-top-danger: rgba(255,255,255,0.68);
  --backdrop-scrim: rgba(11, 13, 16, 0.42);
  --bg-soft: #f3f6f8;
  --control-border-hover: rgba(40, 55, 70, 0.20);
  --control-border-soft: rgba(40, 55, 70, 0.12);
  --danger-border: rgba(184, 80, 64, 0.30);
  --danger-hover: #c95e4e;
  --danger-text: #7a2e22;
  --danger-tint: rgba(184, 80, 64, 0.10);
  --danger-tint-border: rgba(184, 80, 64, 0.28);
  --danger-wash: rgba(184, 80, 64, 0.14);
  --discord-border: rgba(92, 105, 242, 0.20);
  --discord-hover: #6e7af5;
  --glass-card-bg: rgba(255, 255, 255, 0.42);
  --glass-grad-bottom: rgba(255, 255, 255, 0.32);
  --glass-grad-soft: rgba(255, 255, 255, 0.30);
  --glass-grad-top: rgba(255, 255, 255, 0.66);
  --hover-wash: rgba(40, 55, 70, 0.08);
  --info-text: #0c4d89;
  --info-tint: rgba(34, 154, 208, 0.10);
  --info-tint-border: rgba(34, 154, 208, 0.24);
  --ink-brand-qogita: #1F2937;
  --ink-link: #0067c6;
  --ink-link-deep: #0c4d89;
  --ink-negative: #b3261e;
  --ink-positive: #1f7a3a;
  --ink-star-empty: rgba(27, 31, 36, 0.22);
  --ink-table-head: #273344;
  --line-faint: rgba(40, 55, 70, 0.12);
  --line-ink: rgba(27, 31, 36, 0.10);
  --line-ink-soft: rgba(27, 31, 36, 0.08);
  --line-mid: rgba(104, 116, 130, 0.24);
  --line-nested: rgba(58, 73, 88, 0.20);
  --line-progress-track: rgba(58, 73, 88, 0.16);
  --line-subrow: rgba(218, 226, 234, 0.58);
  --nav-anchor-text: rgba(10, 13, 17, 0.66);
  --nested-border: var(--line-nested);
  --qogita-brand: var(--ink-brand-qogita);
  --skeleton-base: rgba(40, 55, 70, 0.06);
  --sky-border: rgba(34, 154, 208, 0.30);
  --sky-border-hover: rgba(34, 154, 208, 0.46);
  --sky-hover: #2db1ed;
  --sky-wash: rgba(34, 154, 208, 0.14);
  --success-border: rgba(61, 139, 95, 0.30);
  --success-text: #285f3f;
  --success-tint: rgba(61, 139, 95, 0.10);
  --success-tint-border: rgba(61, 139, 95, 0.24);
  --surface-active: rgba(255, 255, 255, 0.78);
  --surface-banner: rgba(255, 255, 255, 0.92);
  --surface-cell: rgba(255, 255, 255, 0.34);
  --surface-cell-strong: rgba(255, 255, 255, 0.56);
  --surface-chip: rgba(255, 255, 255, 0.48);
  --surface-control: rgba(255, 255, 255, 0.54);
  --surface-dim: rgba(255, 255, 255, 0.50);
  --surface-faint: rgba(255, 255, 255, 0.40);
  --surface-field-soft: rgba(255, 255, 255, 0.46);
  --surface-ink-hover: rgba(27, 31, 36, 0.06);
  --surface-menu: rgba(255, 255, 255, 0.96);
  --surface-modal-base: rgba(255, 255, 255, 0.40);
  --surface-modal-top: rgba(255, 255, 255, 0.82);
  --surface-muted-row: rgba(229, 233, 238, 0.45);
  --surface-opaque: rgb(250, 252, 253);
  --surface-option: rgba(255, 255, 255, 0.42);
  --surface-pill: rgba(255, 255, 255, 0.52);
  --surface-progress-track: rgba(95, 104, 116, 0.12);
  --surface-raised: rgba(255, 255, 255, 0.70);
  --surface-raised-soft: rgba(255, 255, 255, 0.68);
  --surface-row-hover: rgba(255, 245, 247, 0.52);
  --surface-solid: #fff;
  --surface-table-head: rgba(246, 250, 252, 0.44);
  --surface-toast: rgba(255, 255, 255, 0.94);
  --surface-track: rgba(255, 255, 255, 0.5);
  --surface-veil: rgba(255, 255, 255, 0.30);
  --surface-veil-soft: rgba(255, 255, 255, 0.28);
  --surface-wash: rgba(255, 255, 255, 0.36);
  --surface-wash-soft: rgba(255, 255, 255, 0.32);
  --surface-wash-strong: rgba(255, 255, 255, 0.38);
  --text-on-accent: #fff;
  --tooltip-bg: rgba(15, 20, 26, 0.92);
  --warning-border: rgba(201, 163, 71, 0.36);
  --warning-text: #6a5215;
  --warning-text-alt: #8a6f1f;
  --warning-tint: rgba(201, 163, 71, 0.12);
  --warning-tint-border: rgba(201, 163, 71, 0.32);

  /* ----------------------------------------------------------
     PAGE BACKGROUND (cherry-blossom imagery)
     ---------------------------------------------------------- */

  --page-bg-overlay: linear-gradient(180deg, rgba(244, 247, 250, 0.08), rgba(240, 245, 249, 0.16));
  --page-bg-fallback: url("/cherry-blossom-bg-960.jpg");
  --page-bg-raster: image-set(
    url("/cherry-blossom-bg-960.avif") type("image/avif"),
    url("/cherry-blossom-bg-960.webp") type("image/webp"),
    url("/cherry-blossom-bg-960.jpg") type("image/jpeg")
  );
}

@media (min-width: 900px) {
  :root {
    --page-bg-overlay: linear-gradient(180deg, rgba(244, 247, 250, 0.08), rgba(240, 245, 249, 0.16));
    --page-bg-fallback: url("/cherry-blossom-bg-1440.jpg");
    --page-bg-raster: image-set(
      url("/cherry-blossom-bg-1440.avif") type("image/avif"),
      url("/cherry-blossom-bg-1440.webp") type("image/webp"),
      url("/cherry-blossom-bg-1440.jpg") type("image/jpeg")
    );
  }
}

/* ============================================================
   ATLAS "night blossom" dark theme — token overrides.

   Ready to paste into web/shared/tokens.css after the light
   :root block. Scope: every color-bearing token that needs a
   dark value. Deliberately NOT here (see dark-block-notes.md):
   pure-alias tokens (--rose*, --info*, --nested-border,
   --qogita-brand), unchanged tokens (--text-on-accent,
   --discord-hover, --page-bg-fallback/raster, --glass-blur*),
   all non-color tokens, and the component-level specials
   (logo invert, Keepa white cards, select chevron URI,
   skeleton shimmer literals, scrollbars, monitor inline
   literals) which live outside tokens.css.

   Contrast model: values verified as composites over the night
   photo under the rgba(8,13,22,0.80) overlay stop — worst-case
   backdrop rgb(57,61,69) (white petal highlight). Math in
   dark-block-notes.md.
   ============================================================ */

:root[data-theme="dark"] {
  /* Native UI (scrollbars, select popups, form widgets) follows the theme.
     Scoped to data-theme so the landing (html.is-dark story) is unaffected. */
  color-scheme: dark;

  /* ----------------------------------------------------------
     COLORS — surface / canvas
     Dark glass keeps the light-mode alphas (panel hierarchy is
     preserved); the hue flips to low-luminance navy, never grey.
     ---------------------------------------------------------- */
  --bg: #0A0F16;
  --surface: rgba(16, 23, 32, 0.62);
  --surface-strong: rgba(15, 22, 32, 0.86);
  --surface-soft: rgba(18, 26, 37, 0.44);

  /* Text — near-white with the same cool tilt as light near-black */
  --text: #EEF2F6;                              /* >=12.18:1 on every surface */
  --muted: #A9B4C0;                             /* 6.51:1 min — clears AA */
  --muted-soft: #6E7987;                        /* whisper level, intentionally sub-AA (3.1-4.0:1) */

  /* Lines — cool slate-blue alpha, inverted light for dark */
  --line: rgba(163, 191, 216, 0.16);
  --line-soft: rgba(163, 191, 216, 0.10);
  --line-strong: rgba(185, 208, 228, 0.30);

  /* Brand accent: sky — brightened ~1.5 steps to stay alive at night */
  --sky: #4FB8E8;                               /* as text: 6.10:1 min on surfaces */
  --sky-soft: rgba(79, 184, 232, 0.22);         /* tints need more presence over dark glass */
  --sky-strong: #7CCBEF;                        /* DIRECTION FLIP: "strong" goes brighter in dark */

  /* Brand accent: blossom — lifted one step; soft alpha DROPS so the
     warm wash doesn't grey out the dark glass */
  --blossom: #E4C6C2;
  --blossom-soft: rgba(228, 198, 194, 0.20);
  --rose-legacy: #D98B98;                       /* reserved / do-not-use; themed so it's never a black hole */

  /* Discord — canonical blurple; white OAuth label = 4.61:1. Do not brighten. */
  --discord: #5865F2;

  /* Semantic colors — all text-grade on dark surfaces */
  --success: #5FC48D;                           /* 6.37:1 min */
  --success-soft: rgba(95, 196, 141, 0.18);
  --danger: #F0917F;                            /* 5.91:1 min; terracotta, not alarm red */
  --danger-soft: rgba(240, 145, 127, 0.18);
  --warning: #E0BE6E;                           /* 7.67:1 min */
  --warning-soft: rgba(224, 190, 110, 0.18);

  /* Focus ring — ALIAS BROKEN on purpose: sky-soft @0.22 is too faint
     on navy glass for a11y; focus gets its own hotter alpha */
  --focus-ring: rgba(79, 184, 232, 0.42);
  --control-border: rgba(163, 191, 216, 0.20);
  --control-border-strong: rgba(185, 208, 228, 0.34);
  --control-shadow: 0 6px 14px rgba(2, 6, 12, 0.35);
  --control-shadow-hover: 0 10px 24px rgba(2, 6, 12, 0.45);

  /* ----------------------------------------------------------
     SHADOW SCALE — rebased to near-black navy rgba(2,6,12,·)
     with ~+0.35 alpha; light-mode alphas are invisible on navy.
     Geometry untouched.
     ---------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(2, 6, 12, 0.40);
  --shadow-sm: 0 2px 6px rgba(2, 6, 12, 0.45);
  --shadow-md: 0 6px 16px rgba(2, 6, 12, 0.50);
  --shadow-lg: 0 12px 32px rgba(2, 6, 12, 0.55);
  --shadow-xl: 0 18px 42px rgba(2, 6, 12, 0.60);
  --shadow-2xl: 0 24px 64px rgba(2, 6, 12, 0.65);
  --shadow: 0 24px 64px rgba(2, 6, 12, 0.60);
  --shadow-soft: 0 12px 32px rgba(2, 6, 12, 0.45);

  /* ----------------------------------------------------------
     GLASS SURFACE TOKENS — navy glass at light alphas; the
     white-alpha border is the dark-glass signature (moonlit rim).
     --glass-blur(-soft) intentionally unchanged: saturate() pulls
     blossom pink through the glass and keeps the night alive.
     ---------------------------------------------------------- */
  --glass-bg: rgba(15, 22, 32, 0.58);
  --glass-bg-strong: rgba(13, 19, 28, 0.88);
  --glass-bg-soft: rgba(18, 26, 37, 0.44);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-border-strong: rgba(255, 255, 255, 0.24);
  --glass-highlight: rgba(255, 255, 255, 0.10);
  --glass-shadow: 0 18px 42px rgba(2, 8, 16, 0.55);
  --glass-shadow-soft: 0 8px 22px rgba(2, 8, 16, 0.40);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(2, 8, 16, 0.30);
  --glass-focus: 0 0 0 3px rgba(79, 184, 232, 0.42);

  /* ----------------------------------------------------------
     SEMANTIC SURFACE/INK LADDER — dark set.
     Mapping rules applied (see notes for per-group rationale):
     · white fills a>=0.42  -> same-alpha low-luminance navy
       (base rgb(21,30,42) mid-band; solids #182230 family;
       active/raised states lift to slate rgb(46-52,62-70,82-92))
     · white washes a<=0.40 -> stay white, alpha x~0.2
       (gentle moonlight elevation over dark glass)
     · dark inks            -> light equivalents, >=4.5:1 verified
     · dark-ink lines       -> slate-blue/white alpha at matched weight
     · accent borders/tints -> brightened accent base, alpha +0.02-0.10
     ---------------------------------------------------------- */
  --active-glass-top: rgba(48, 65, 86, 0.70);            /* active control glass: lifted slate, reads raised */
  --active-glass-top-danger: rgba(46, 62, 82, 0.68);
  --backdrop-scrim: rgba(2, 6, 12, 0.62);                /* deeper than light 0.42 — modal must separate from a dark page */
  --bg-soft: #0E141D;                                    /* lockstep with --bg (reduced-transparency gradient top) */
  --control-border-hover: rgba(170, 196, 220, 0.26);
  --control-border-soft: rgba(163, 191, 216, 0.14);
  --danger-border: rgba(240, 145, 127, 0.40);
  --danger-hover: #F4A491;
  --danger-text: #F5A794;                                /* 7.52:1 on danger tint over surface */
  --danger-tint: rgba(240, 145, 127, 0.12);
  --danger-tint-border: rgba(240, 145, 127, 0.36);
  --danger-wash: rgba(240, 145, 127, 0.18);
  --discord-border: rgba(138, 148, 236, 0.30);           /* text-safe discord family so the edge registers on navy */
  --glass-card-bg: rgba(18, 26, 37, 0.42);
  --glass-grad-bottom: rgba(15, 21, 30, 0.32);           /* input/card gradient: navy well, lighter top */
  --glass-grad-soft: rgba(16, 23, 32, 0.30);
  --glass-grad-top: rgba(22, 31, 44, 0.66);
  --hover-wash: rgba(163, 191, 216, 0.12);               /* ink-hover flips to light-wash hover */
  --info-text: #9AD2F2;                                  /* 8.75:1 on info tint over surface */
  --info-tint: rgba(79, 184, 232, 0.12);
  --info-tint-border: rgba(79, 184, 232, 0.32);
  --ink-brand-qogita: #D6DCE4;                           /* Qogita partner wordmark ink */
  --ink-link: #7CBCF4;                                   /* hover/emphatic link step (6.4:1 on cells) */
  --ink-link-deep: #63A9EE;                              /* resting link ink (5.5:1 min on surfaces) */
  --ink-negative: #F49C8B;                               /* 6.20:1 on sheet cells */
  --ink-positive: #5FCF8A;                               /* 6.69:1 on sheet cells */
  --ink-star-empty: rgba(238, 242, 246, 0.28);
  --ink-table-head: #C6D1DE;                             /* 8.40:1 on table head; one step above --muted */
  --line-faint: rgba(163, 191, 216, 0.12);
  --line-ink: rgba(238, 242, 246, 0.12);
  --line-ink-soft: rgba(238, 242, 246, 0.10);
  --line-mid: rgba(163, 191, 216, 0.24);
  --line-nested: rgba(163, 191, 216, 0.20);
  --line-progress-track: rgba(163, 191, 216, 0.16);
  --line-subrow: rgba(163, 191, 216, 0.18);              /* light-grey subrow line would glow; slate alpha instead */
  --nav-anchor-text: rgba(238, 242, 246, 0.72);          /* landing-only consumer; safe under [data-theme] scope */
  --skeleton-base: rgba(255, 255, 255, 0.05);            /* dark-slate shimmer stops are invisible on navy */
  --sky-border: rgba(79, 184, 232, 0.40);
  --sky-border-hover: rgba(79, 184, 232, 0.55);
  --sky-hover: #72C9F2;
  --sky-wash: rgba(79, 184, 232, 0.18);
  --success-border: rgba(95, 196, 141, 0.40);
  --success-text: #8FD9B0;                               /* 8.58:1 on success tint over surface */
  --success-tint: rgba(95, 196, 141, 0.12);
  --success-tint-border: rgba(95, 196, 141, 0.32);
  --surface-active: rgba(52, 70, 92, 0.78);              /* active nav: brightest lift in the ladder */
  --surface-banner: rgba(22, 31, 44, 0.92);
  --surface-cell: rgba(255, 255, 255, 0.07);             /* workhorse chrome wash (rail/toolbar/rows): moonlight lift */
  --surface-cell-strong: rgba(21, 30, 42, 0.56);         /* sheet td fill: calm navy, chrome lifts above it */
  --surface-chip: rgba(21, 30, 42, 0.48);
  --surface-control: rgba(21, 30, 42, 0.54);
  --surface-dim: rgba(21, 30, 42, 0.50);
  --surface-faint: rgba(14, 20, 29, 0.40);               /* disabled fields dim DOWN, not up */
  --surface-field-soft: rgba(21, 30, 42, 0.46);
  --surface-ink-hover: rgba(238, 242, 246, 0.08);        /* ink-hover wash flips to light */
  --surface-menu: rgba(23, 33, 46, 0.96);
  --surface-modal-base: rgba(16, 23, 32, 0.40);
  --surface-modal-top: rgba(21, 30, 42, 0.84);
  --surface-muted-row: rgba(18, 26, 37, 0.45);           /* zebra fill per palette */
  --surface-opaque: rgb(19, 27, 38);              /* reduced-transparency fallback: matches composited panels */
  --surface-option: rgba(18, 26, 37, 0.42);
  --surface-pill: rgba(21, 30, 42, 0.52);
  --surface-progress-track: rgba(163, 191, 216, 0.10);
  --surface-raised: rgba(48, 65, 86, 0.70);              /* raised chrome / is-on states: lifted slate */
  --surface-raised-soft: rgba(46, 62, 82, 0.68);
  --surface-row-hover: rgba(228, 198, 194, 0.10);        /* blossom moonlight hover — must LIGHTEN, keeps petal identity */
  --surface-solid: #182230;                              /* top of the solid ladder (modal, card-solid, active tab) */
  --surface-table-head: rgba(24, 34, 48, 0.44);
  --surface-toast: rgba(23, 32, 45, 0.94);
  --surface-track: rgba(255, 255, 255, 0.10);            /* toggle track stays a light lane so the navy knob reads */
  --surface-veil: rgba(255, 255, 255, 0.06);
  --surface-veil-soft: rgba(255, 255, 255, 0.05);
  --surface-wash: rgba(255, 255, 255, 0.075);
  --surface-wash-soft: rgba(255, 255, 255, 0.065);
  --surface-wash-strong: rgba(255, 255, 255, 0.08);
  --tooltip-bg: rgba(30, 40, 54, 0.96);                  /* stays dark but lifted off the page; white text 14.7:1 */
  --warning-border: rgba(224, 190, 110, 0.44);
  --warning-text: #E7CC86;                               /* 8.45:1 on warning tint over surface */
  --warning-text-alt: #DFC072;
  --warning-tint: rgba(224, 190, 110, 0.14);
  --warning-tint-border: rgba(224, 190, 110, 0.40);

  /* ----------------------------------------------------------
     PAGE BACKGROUND — THE night wash. Same photo, deep-navy
     gradient. :root[data-theme="dark"] (0,2,0) also outweighs the
     >=900px @media :root (0,1,0) redeclaration, so one entry
     covers both breakpoints. --page-bg-fallback/raster unchanged.
     ---------------------------------------------------------- */
  --page-bg-overlay: linear-gradient(180deg, rgba(8, 13, 22, 0.80), rgba(6, 10, 18, 0.88));
}