/* EchoGlobal foundation — Inter web font + all design tokens, self-contained. */
/* Variable axis, not fixed steps: the site uses 300, 650 and 750 in 212 places, none of which
   exist in a 400;500;600;700;800 request — they were silently substituted (750 rendered as 800,
   650 as 700, 300 as 400). A range serves the real weights. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");

/* ============================================================
   EchoGlobal — Color tokens
   Light-only brand. Echo Cyan leads; Wave Cyan is the logo hue.
   ============================================================ */
:root {
  /* ---- Brand blues ---- */
  --echo-cyan: #5DAEE3;        /* PRIMARY — buttons, tiles, key surfaces */
  --wave-cyan: #3DB4E8;        /* the wave inside the logo; highlights, live states */
  --wordmark-blue: #55A7DD;    /* light-background wordmark + light headline */
  --ice: #D9E8F8;              /* fills, duotone-icon shapes, soft surfaces */
  --deep-blue: #0070F8;        /* functional links only */

  /* ---- Ink & neutrals ---- */
  --ink: #203058;              /* primary text */
  --slate: #5A6685;            /* secondary text */
  /* Was #8090A8, which measured 3.24:1 on white and 3.00:1 on --mist — below the
     4.5:1 minimum. Every --steel text use on the site is small (11–15px), so the
     large-text 3:1 allowance never applied to a single one of them.
     #606D85 clears 4.5:1 on every ground --steel is actually used on:
     white 5.22 · --panel 4.95 · --mist 4.82 · #EDF1F7 4.60.
     Two grounds it does NOT clear, because nothing meaningfully lighter than
     --slate can: the --grad-ice-fade end stop #D9E8F8 (4.16) and the white
     paper's cream #ECE8DD (4.26). Use --slate for tertiary text on those. */
  --steel: #606D85;            /* tertiary text, metadata — on white/panel/mist */
  --cloud: #E6E8EF;            /* hairline borders */
  --mist: #F4F6FA;             /* app / section background */
  --panel: #F7F9FC;            /* card fill on white */
  --white: #FFFFFF;

  /* ---- Accent ---- */
  --rose: #F2568B;             /* human-warmth accent, follow-up */
  --blush: #FDE1EA;            /* rose tint surface */

  /* ---- Semantic ---- */
  --success: #22B07D;
  --success-tint: #DFF6EC;
  --warning: #F5B841;
  --warning-tint: #FEF3D8;
  /* Darkened from #C98A00, which measured 2.67:1 on --warning-tint — under AA
     everywhere it was used, and every use is small text on a light ground.
     #8A6100 measures 5.02:1 on the tint and higher on white. It is the value
     .slot p had already hardcoded to work around the old one. */
  --warning-ink: #8A6100;
  --error: #F0407C;

  /* ---- Gradients (subtle, same-family only) ---- */
  /* --grad-sky is DECORATIVE ONLY: accent bars, avatar circles, tiles, covers —
     anywhere nothing has to be read. It measures 2.43:1 (light stop) and 2.36:1
     (dark stop) against white, so white text or icons on it fail WCAG AA. It used
     to be documented as the "workhorse: buttons, tiles, covers" and that is exactly
     how the primary CTA became the lowest-contrast element on the page. */
  --grad-sky: linear-gradient(135deg, #5DAEE3 0%, #3DB4E8 100%); /* @kind color */ /* decorative fills only — never behind text */
  /* --grad-action is the readable counterpart: use it for anything clickable or
     labelled. Both stops clear 4.5:1 with white, which is the bar that applies
     because button labels are bold but under 18.66px. 4.74:1 at the light stop,
     5.56:1 at the dark. Note #2E86AD, suggested by the 2026-08-01 audit, measures
     4.09:1 and does NOT pass — #2A7B9F is the corrected light stop. */
  --grad-action: linear-gradient(135deg, #2A7B9F 0%, #176F9A 100%); /* @kind color */ /* buttons, chat bubbles, CTA panels */
  /* Was #1B6F99, which is fine on white (5.56:1) but lands at 4.46:1 on the ice
     tint #D9E8F8 used by callouts and lead-magnet strips — missing AA by 0.04,
     quietly, in eight places across the Help Center and the white-paper funnel.
     #1A6B94 clears every ground it is used on: white 5.88 · --panel 5.57 ·
     #EAF3FC 5.24 · #D9E8F8 4.71, and is visually all but identical. */
  --action-ink: #1A6B94; /* @kind color */ /* solid equivalent for text links */
  --shadow-action: 0 8px 22px rgba(23, 111, 154, 0.28);
  --grad-ice-fade: linear-gradient(170deg, #FBFDFF 0%, #D9E8F8 100%); /* @kind color */ /* section / slide backgrounds */
  --grad-deep-current: linear-gradient(135deg, #3DB4E8 0%, #0070F8 100%); /* @kind color */ /* data + presentation accents */
  --grad-logo-bubble: linear-gradient(150deg, #6FBCEC 0%, #4C9FD8 100%); /* @kind color */ /* the light-logo bubble self-gradient */

  /* ---- Semantic aliases ---- */
  --text-primary: var(--ink);
  --text-secondary: var(--slate);
  --text-tertiary: var(--steel);
  --text-link: var(--deep-blue);
  --surface-page: var(--white);
  --surface-muted: var(--mist);
  --surface-card: var(--white);
  --surface-fill: var(--panel);
  --border-hairline: var(--cloud);
  --accent-primary: var(--echo-cyan);
  --accent-brand-mark: var(--wave-cyan);
  --focus-ring: rgba(93, 174, 227, 0.18);
}
/* ============================================================
   EchoGlobal — Typography tokens (Inter)
   Bold headings, Semibold structure, Medium/Regular reading.
   ============================================================ */
:root {
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* Weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */

  /* Type scale — size / line-height pairs */
  --fs-display: 88px; /* @kind font */ --lh-display: 0.95; /* @kind font */ /* cover headline */
  --fs-h1: 44px; /* @kind font */ --lh-h1: 1.08; /* @kind font */ /* section title */
  --fs-h2: 32px; /* @kind font */ --lh-h2: 40px; /* @kind font */
  --fs-h3: 24px; /* @kind font */ --lh-h3: 30px; /* @kind font */
  --fs-h4: 20px; /* @kind font */ --lh-h4: 30px; /* @kind font */
  --fs-h5: 18px; /* @kind font */ --lh-h5: 24px; /* @kind font */
  --fs-h6: 16px; /* @kind font */ --lh-h6: 20px; /* @kind font */
  --fs-p1: 15px; /* @kind font */ --lh-p1: 20px; /* @kind font */ /* medium body */
  --fs-p2: 14px; /* @kind font */ --lh-p2: 20px; /* @kind font */ /* regular body */
  --fs-caption: 12px; /* @kind font */ --lh-caption: 18px; /* @kind font */
  --fs-label: 10px; /* @kind font */ --lh-label: 14px; /* @kind font */ /* all-caps label */

  /* Tracking */
  --track-display: -0.04em; /* @kind font */
  --track-heading: -0.03em; /* @kind font */
  --track-tight: -0.01em; /* @kind font */
  --track-label: 0.14em; /* @kind font */ /* all-caps labels */
  --track-eyebrow: 0.16em; /* @kind font */ /* section eyebrows */
}
/* ============================================================
   EchoGlobal — Spacing & radius tokens
   ============================================================ */
:root {
  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Radius — EchoGlobal runs soft and rounded */
  --radius-xs: 8px;    /* small buttons, chips inner */
  --radius-sm: 11px;   /* inputs */
  --radius-md: 12px;   /* buttons */
  --radius-lg: 16px;   /* small cards, icon tiles */
  --radius-xl: 20px;   /* cards */
  --radius-2xl: 24px;  /* large panels */
  --radius-pill: 999px;
  --radius-panel: 34px; /* cover / footer sheets */
}
/* ============================================================
   EchoGlobal — Effects: shadows, focus, motion
   ============================================================ */
:root {
  /* Shadows — soft, cool-tinted, never harsh */
  --shadow-sm: 0 1px 2px rgba(32, 48, 88, 0.06);
  --shadow-card: 0 8px 22px rgba(93, 174, 227, 0.14);
  --shadow-float: 0 12px 34px rgba(32, 48, 88, 0.12);
  --shadow-brand: 0 8px 22px rgba(93, 174, 227, 0.35); /* under Echo Cyan tiles */

  /* Focus ring */
  --ring-focus: 0 0 0 3px rgba(93, 174, 227, 0.18);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
}

/* ============================================================
   EchoGlobal — the second theme
   ============================================================
   The site was light-only until 2026-08-18. Dark mode is implemented the way
   the admin panel's already is: by REDEFINING THE RAMP — ink · slate · steel ·
   cloud · mist · panel · white — rather than by writing a second stylesheet.
   site.css and site-shell.css already use those seven semantically (white =
   the surface a card sits on, mist = the recessed band, panel = a fill on that
   surface, cloud = the hairline), so swapping the seven flips all 88 pages.

   The values are COPIED FROM admin/src/styles/tokens.css, deliberately. Every
   one of them was measured there against the WCAG AA bar and is checked by
   tools/admin-probe.mjs on every run; a second, prettier dark palette invented
   here would be a second thing to measure and a second thing to drift.

   THREE THINGS TO KNOW BEFORE EDITING THIS SECTION.

   1. `--white` does NOT mean white. It means "the surface a card sits on",
      and in dark it is #131C2B. Where a literal white is genuinely wanted —
      the label on the action gradient, text on a permanently-dark band — use
      `--on-action` or write #fff out. The admin shipped near-black text on a
      blue button (3.07:1) by getting exactly this wrong, and the site had the
      same 12 uses of `color: var(--white)` waiting to do it again.

   2. The raw values live ONCE, as --dk-*, and the two switch blocks below only
      map them. There are two switches because there are three states: an
      explicit choice stamps data-theme on <html> and must win in BOTH
      directions, and the default (no attribute) has to follow the visitor's
      system. A value written into either block instead of into --dk-* is a
      value the other block does not have.

   3. `color-scheme` is set on both. Without it the browser paints form
      controls, scrollbars and the canvas behind the page from the OS theme,
      so a visitor reading dark-on-light gets a white scrollbar down a dark
      page and a light autofill on a dark input.
   ============================================================ */
:root {
  /* ---- Pairs that were hex literals in site.css, because each needs a
          different value per theme. Text on a tint, measured against the
          tint named beside it. ---- */
  --good-ink: #12734F;   /* on --success-tint */
  --bad-ink: #C0245C;    /* on --blush */
  --on-action: #FFFFFF;  /* the label on --grad-action — white in BOTH themes */

  /* ---- Surfaces that were rgba() literals, for the same reason ---- */
  --header-bg: rgba(255, 255, 255, 0.9);   /* the sticky header, over content */
  --scrim: rgba(15, 23, 42, 0.44);         /* behind the mobile drawer */

  /* The ministry logo wall unifies permissioned logos to a single ink. On a
     dark page that ink is invisible, so the filter is a token. It is NOT
     applied to design/assets/providers/ — those are other companies' marks
     and are never recoloured, in either theme. */
  --logo-wall-filter: brightness(0);

  /* ---- A "slab": a permanently dark surface that carries its own light text
          — code blocks, the video poster, device screens. It reads as dark in
          BOTH themes, so it cannot be painted with --ink, which is near-white
          in dark. ---- */
  --slab: #203058;
  --slab-ink: #E9EEF7;
  --slab-dim: #9FB0CC;

  /* The commitment band: a saturated blue panel carrying white text. */
  /* #0070F8 until 2026-08-29, where white measured 4.49:1 against it — one
     hundredth short of AA, and carried in the contrast baseline as debt on
     every page using the commitment band. One step darker clears it at
     4.54:1 and is not a visible change. */
  --band-deep: #006FF8;
  --band-3: #1A6B94;   /* the funnel ramp's third step — a FILL, so it stays dark */

  /* The movement strip's two pale ends. They carry --slate text, so they
     cannot stay pale on a dark page. */
  --tint-away-2: #F6E2EA;
  --tint-away-1: #FBF0F4;
  --tint-toward-1: #E6F5EE;

  /* Icons drawn in a data URI, where a var() cannot reach — so the whole URL
     is the token. Same five drawings, one ink per theme. */
  --icon-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4.5 10.4 8.3 14 15.5 6.2' stroke='%231A6B94' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-deny: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 6l8 8M14 6l-8 8' stroke='%23C0245C' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --icon-note: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='7.3' stroke='%231A6B94' stroke-width='1.9'/%3E%3Cpath d='M10 9.3v4.3' stroke='%231A6B94' stroke-width='2.1' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='6.3' r='1.15' fill='%231A6B94'/%3E%3C/svg%3E");
  --icon-tip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='8.2' r='4.7' stroke='%2314684A' stroke-width='1.9'/%3E%3Cpath d='M7.9 14.5h4.2M8.8 16.9h2.4' stroke='%2314684A' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
  --icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 3.7 17.5 16.3H2.5L10 3.7Z' stroke='%238A5F00' stroke-width='1.9' stroke-linejoin='round'/%3E%3Cpath d='M10 8.5v3.1' stroke='%238A5F00' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='13.9' r='1.05' fill='%238A5F00'/%3E%3C/svg%3E");

  color-scheme: light;

  /* ============================================================
     The dark ramp, defined once. Nothing reads these directly; the two
     switch blocks below map them onto the real token names.
     ============================================================ */
  --dk-echo-cyan: #5DAEE3;      /* brand constant — the same hue in both themes */
  --dk-wave-cyan: #3DB4E8;      /* brand constant */
  --dk-wordmark-blue: #78C4EF;  /* the light wordmark blue is 2.9:1 on #131C2B */
  --dk-ice: #0E2B42;
  --dk-deep-blue: #6BA8FF;      /* functional links only; #0070F8 is 3.1:1 on dark */

  --dk-ink: #EEF1F6;            /* 15.1:1 on --white */
  --dk-slate: #A3AEC2;          /* 7.6:1 */
  --dk-steel: #8794A8;          /* 5.6:1 */
  --dk-cloud: #2A3549;
  --dk-mist: #0B1220;           /* the recessed band — darker than the page, as in light */
  --dk-panel: #1A2436;          /* a fill ON the card: lighter here, darker in light */
  --dk-white: #131C2B;          /* THE CARD SURFACE. Not white. See note 1. */

  --dk-rose: #F2568B;
  --dk-blush: #3D1024;
  --dk-success: #22B07D;
  --dk-success-tint: #123527;
  --dk-warning: #F5B841;
  --dk-warning-tint: #3A2C0C;
  --dk-warning-ink: #F2C86A;    /* 8.6:1 on the dark --warning-tint */
  --dk-error: #F0407C;
  --dk-good-ink: #7FE0B4;       /* 8.5:1 on the dark --success-tint */
  --dk-bad-ink: #FF9EC0;        /* 8.4:1 on the dark --blush */

  /* --grad-action is NOT redefined. White on #2A7B9F measures 4.74:1 either
     way, and a primary button that changes colour with the theme stops reading
     as the same control. --action-ink, which is the same blue as TEXT, must
     change: #1A6B94 is 2.1:1 on #131C2B. */
  --dk-action-ink: #78C4EF;     /* 8.9:1 on --white, 8.1:1 on --panel */
  --dk-grad-ice-fade: linear-gradient(170deg, #16202F 0%, #0E2B42 100%);
  --dk-grad-logo-bubble: linear-gradient(150deg, #4C9FD8 0%, #2C79B4 100%);

  /* Dark surfaces separate by LIGHT, not by shadow — a black shadow on a black
     page is nothing — so hairlines carry more of the work and the shadows only
     deepen the well under something that genuinely floats. */
  --dk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --dk-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 20px -8px rgba(0, 0, 0, 0.6);
  --dk-shadow-float: 0 4px 10px rgba(0, 0, 0, 0.5), 0 22px 48px -20px rgba(0, 0, 0, 0.8);
  --dk-shadow-brand: 0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 22px -10px rgba(61, 180, 232, 0.5);
  --dk-shadow-action: 0 1px 2px rgba(0, 0, 0, 0.5), 0 3px 8px -3px rgba(0, 0, 0, 0.6);
  --dk-focus-ring: rgba(120, 196, 239, 0.35);
  --dk-ring-focus: 0 0 0 3px rgba(120, 196, 239, 0.35);

  --dk-header-bg: rgba(19, 28, 43, 0.9);
  --dk-scrim: rgba(3, 6, 12, 0.7);
  --dk-logo-wall-filter: brightness(0) invert(1);

  --dk-slab: #0A1220;          /* still a slab, but under the dark card, not over it */
  --dk-band-deep: #14406E;     /* white stays 8.0:1 here; #6BA8FF would be 2.4:1 */
  --dk-band-3: #1A6B94;        /* unchanged: it is a fill, not the link ink */
  --dk-tint-away-2: #3D1024;
  --dk-tint-away-1: #2A0C18;
  --dk-tint-toward-1: #0E2A20;
  --dk-icon-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4.5 10.4 8.3 14 15.5 6.2' stroke='%2378C4EF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --dk-icon-deny: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 6l8 8M14 6l-8 8' stroke='%23FF9EC0' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --dk-icon-note: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='7.3' stroke='%2378C4EF' stroke-width='1.9'/%3E%3Cpath d='M10 9.3v4.3' stroke='%2378C4EF' stroke-width='2.1' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='6.3' r='1.15' fill='%2378C4EF'/%3E%3C/svg%3E");
  --dk-icon-tip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='8.2' r='4.7' stroke='%237FE0B4' stroke-width='1.9'/%3E%3Cpath d='M7.9 14.5h4.2M8.8 16.9h2.4' stroke='%237FE0B4' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
  --dk-icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 3.7 17.5 16.3H2.5L10 3.7Z' stroke='%23F2C86A' stroke-width='1.9' stroke-linejoin='round'/%3E%3Cpath d='M10 8.5v3.1' stroke='%23F2C86A' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='13.9' r='1.05' fill='%23F2C86A'/%3E%3C/svg%3E");
}

/* ---- Switch 1: the visitor's system preference, when they have not chosen.
        Guarded with :not([data-theme='light']) so an explicit light choice
        still wins on a machine set to dark. ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --echo-cyan: var(--dk-echo-cyan);
    --wave-cyan: var(--dk-wave-cyan);
    --wordmark-blue: var(--dk-wordmark-blue);
    --ice: var(--dk-ice);
    --deep-blue: var(--dk-deep-blue);

    --ink: var(--dk-ink);
    --slate: var(--dk-slate);
    --steel: var(--dk-steel);
    --cloud: var(--dk-cloud);
    --mist: var(--dk-mist);
    --panel: var(--dk-panel);
    --white: var(--dk-white);

    --rose: var(--dk-rose);
    --blush: var(--dk-blush);
    --success: var(--dk-success);
    --success-tint: var(--dk-success-tint);
    --warning: var(--dk-warning);
    --warning-tint: var(--dk-warning-tint);
    --warning-ink: var(--dk-warning-ink);
    --error: var(--dk-error);
    --good-ink: var(--dk-good-ink);
    --bad-ink: var(--dk-bad-ink);

    --action-ink: var(--dk-action-ink);
    --grad-ice-fade: var(--dk-grad-ice-fade);
    --grad-logo-bubble: var(--dk-grad-logo-bubble);

    --shadow-sm: var(--dk-shadow-sm);
    --shadow-card: var(--dk-shadow-card);
    --shadow-float: var(--dk-shadow-float);
    --shadow-brand: var(--dk-shadow-brand);
    --shadow-action: var(--dk-shadow-action);
    --focus-ring: var(--dk-focus-ring);
    --ring-focus: var(--dk-ring-focus);

    --header-bg: var(--dk-header-bg);
    --scrim: var(--dk-scrim);
    --logo-wall-filter: var(--dk-logo-wall-filter);

    --slab: var(--dk-slab);
    --band-deep: var(--dk-band-deep);
    --band-3: var(--dk-band-3);
    --tint-away-2: var(--dk-tint-away-2);
    --tint-away-1: var(--dk-tint-away-1);
    --tint-toward-1: var(--dk-tint-toward-1);
    --icon-tick: var(--dk-icon-tick);
    --icon-deny: var(--dk-icon-deny);
    --icon-note: var(--dk-icon-note);
    --icon-tip: var(--dk-icon-tip);
    --icon-warning: var(--dk-icon-warning);
  }
}

/* ---- Switch 2: the visitor chose dark. Same mapping, no media query, so it
        wins on a machine set to light. Keep the two lists identical —
        tools/contrast.mjs asserts that they are. ---- */
:root[data-theme='dark'] {
  color-scheme: dark;

  --echo-cyan: var(--dk-echo-cyan);
  --wave-cyan: var(--dk-wave-cyan);
  --wordmark-blue: var(--dk-wordmark-blue);
  --ice: var(--dk-ice);
  --deep-blue: var(--dk-deep-blue);

  --ink: var(--dk-ink);
  --slate: var(--dk-slate);
  --steel: var(--dk-steel);
  --cloud: var(--dk-cloud);
  --mist: var(--dk-mist);
  --panel: var(--dk-panel);
  --white: var(--dk-white);

  --rose: var(--dk-rose);
  --blush: var(--dk-blush);
  --success: var(--dk-success);
  --success-tint: var(--dk-success-tint);
  --warning: var(--dk-warning);
  --warning-tint: var(--dk-warning-tint);
  --warning-ink: var(--dk-warning-ink);
  --error: var(--dk-error);
  --good-ink: var(--dk-good-ink);
  --bad-ink: var(--dk-bad-ink);

  --action-ink: var(--dk-action-ink);
  --grad-ice-fade: var(--dk-grad-ice-fade);
  --grad-logo-bubble: var(--dk-grad-logo-bubble);

  --shadow-sm: var(--dk-shadow-sm);
  --shadow-card: var(--dk-shadow-card);
  --shadow-float: var(--dk-shadow-float);
  --shadow-brand: var(--dk-shadow-brand);
  --shadow-action: var(--dk-shadow-action);
  --focus-ring: var(--dk-focus-ring);
  --ring-focus: var(--dk-ring-focus);

  --header-bg: var(--dk-header-bg);
  --scrim: var(--dk-scrim);
  --logo-wall-filter: var(--dk-logo-wall-filter);

  --slab: var(--dk-slab);
  --band-deep: var(--dk-band-deep);
  --band-3: var(--dk-band-3);
  --tint-away-2: var(--dk-tint-away-2);
  --tint-away-1: var(--dk-tint-away-1);
  --tint-toward-1: var(--dk-tint-toward-1);
  --icon-tick: var(--dk-icon-tick);
  --icon-deny: var(--dk-icon-deny);
  --icon-note: var(--dk-icon-note);
  --icon-tip: var(--dk-icon-tip);
  --icon-warning: var(--dk-icon-warning);
}