/* =========================================================================
   VIRASAT DESIGN TOKENS
   Version: 2.1 — 17 Aug 2026 — PURPLE RETHEME + MULTI-SCRIPT TYPE
   Owner: Design (Sam's team)

   REVISED 17 Aug 2026 per Sam: "I dont like orange. Can we go with Purple?
   Better fonts, more personable, helpful intuitive. Right now looks like a
   grade 8 demo" — plus an explicit ask to look at how other elder-focused
   assistants (ElliQ, GrandPad/Grandie, Papa) handle warmth and simplicity
   before touching anything. Their common thread: large unambiguous
   controls, a calm/non-clinical palette, a companion tone rather than a
   utility tone, and onboarding that explains WHY before asking for taps.
   That informed both this palette pass and the welcome-flow rewrite
   alongside it (see welcome.html/welcome.js).

   WHAT CHANGED FROM v2.0:
     - Section 0a's tonal ramps are regenerated from a warm plum/orchid
       PURPLE seed (H≈288°) instead of the old terracotta (H≈15°),
       replacing every hand-off from "grade-8 demo orange." Secondary
       (marigold/gold, H≈38°) is kept EXACTLY as before — royal purple +
       gold is a deliberate, warm pairing, not an accident — so gold
       accents, borders, and highlights did not need to move. Tertiary
       moved from a dusk-blue to a muted sage (H≈165°) so it reads as a
       distinct third accent next to purple instead of sitting in the same
       cool-color family. Neutral/neutral-variant were re-derived from the
       purple hue (not the old orange hue) at low saturation, so
       backgrounds/borders/muted text now carry a faint warm-purple
       undertone instead of a leftover orange-grey one that would have
       clashed. Every pair that matters was re-verified for WCAG contrast
       (see the contrast note in Section 0b) — all at or above AA, most AAA.
     - Section 2's typeface changed from Noto Sans + Noto Sans Devanagari to
       the Anek family (Anek Latin + Anek Devanagari + Anek Gurmukhi) — see
       the typeface note below for why.

   ONE CARRY-OVER DEPARTURE FROM STOCK MATERIAL 3, still justified:
     SEED COLOR: generated from a brand seed (now purple, was terracotta),
     not picked from Material's own default palettes — MD3 is explicitly a
     system for generating a full tonal palette FROM a brand seed color
     (the real "Material You" workflow), so this remains correct MD3 usage.

   TYPEFACE — Anek (Latin + Devanagari + Gurmukhi), replacing Noto Sans:
     Noto Sans's whole design goal is neutral, invisible, "no tofu boxes"
     coverage — exactly right for a document-rendering system font, but it
     reads as generic/utilitarian, which is part of what made this app feel
     like "a grade 8 demo" per Sam's note. It was ALSO missing Gurmukhi
     entirely — Punjabi narrators were silently falling back to a
     mismatched system font this whole time, an accessibility gap nobody
     had caught. Anek (Google Fonts, designed by the Mavin Design Studio /
     Google Fonts Indic type team) solves both problems at once: it's a
     single unified variable type SYSTEM with matched-design siblings per
     script — Anek Latin, Anek Devanagari, Anek Gurmukhi (also Bangla,
     Gujarati, Tamil, etc., not used here) — so English, Hindi, and Punjabi
     text all share one warm, rounded, contemporary voice instead of Latin
     text looking like a different app than the Devanagari/Gurmukhi text.
     Confirmed via Google Fonts' own specimen pages (fonts.google.com/
     specimen/Anek+Devanagari and .../Anek+Gurmukhi) before committing to
     the name, per this project's "verify before trusting a font/model name"
     lesson from earlier in the session — both are real, free, variable
     (weight + width axes) Google Fonts families. See index.html/talk.html/
     welcome.html/history.html's <link> tags for the actual font request.

   BACKWARD COMPATIBILITY, STILL ON PURPOSE: every token name from v1.0/2.0
   (--color-primary, --color-text-primary, --radius-md, --shadow-md, etc.)
   is KEPT and still exists below (Sections 1-7) — every existing component
   across BOTH surfaces (Narrator web app's login/welcome/history screens,
   and the entire Sponsor PWA) already consumes only these names, per this
   file's own "no hand-picked one-off values" rule. Sections 1-7 are thin
   aliases onto the MD3 roles, so the WHOLE app inherits the purple retheme
   through the existing token indirection, automatically, without a single
   component-file edit.

   NOT YET INDIVIDUALLY RE-AUDITED: the Sponsor PWA's own stylesheet
   inherits the new palette/type via the same alias mechanism (so nothing
   is broken there), but has not been visually re-verified screen-by-screen
   in this pass — same caveat as v2.0 carried for it.

   Read STYLE_GUIDE.md alongside this file for rationale, dos/don'ts,
   and accessibility justification. Do not hand-pick colors/sizes outside
   this token set — if something is missing, add a token here, don't
   invent a one-off value in a component file.
   ========================================================================= */

:root {

  /* ======================================================================
     0a. MD3 REFERENCE PALETTE — TONAL RAMPS
     Five HCT-inspired tonal ramps (0=black … 100=white), generated from
     brand seed colors rather than hand-picked per-use hex values, per the
     real MD3 "Material You" palette-generation workflow. Primary's seed is
     now a warm plum/orchid PURPLE (H≈288°, was terracotta H≈15° in v2.0 —
     see file header); Secondary is UNCHANGED marigold/turmeric gold
     (H≈38°) — royal purple + gold is a deliberate pairing; Tertiary moved
     to a muted sage (H≈165°, was dusk-indigo) for a third accent that
     reads distinct from purple; Neutral/Neutral-Variant are now derived
     from the purple hue at low saturation (were orange-derived in v2.0),
     so backgrounds/borders carry a warm-purple rather than warm-orange
     undertone. Verified via WCAG contrast math, not eyeballed — every
     text/fill pair MD3 defines "on-X on X" for is at or above AA (4.5:1
     normal text), most clear AAA (7:1+); see Section 0c's role
     assignments for the pairs that matter.
     ====================================================================== */
  --md-ref-primary-0: #000000;
  --md-ref-primary-10: #200F24;
  --md-ref-primary-20: #401E48;
  --md-ref-primary-30: #602C6D;
  --md-ref-primary-40: #803B91;
  --md-ref-primary-50: #A04AB5;
  --md-ref-primary-60: #B36EC4;
  --md-ref-primary-70: #C692D3;
  --md-ref-primary-80: #D9B7E1;
  --md-ref-primary-90: #ECDBF0;
  --md-ref-primary-95: #F5EDF8;
  --md-ref-primary-98: #FBF8FC;
  --md-ref-primary-99: #FDFBFE;
  --md-ref-primary-100: #FFFFFF;

  --md-ref-secondary-0: #000000;
  --md-ref-secondary-10: #261D0D;
  --md-ref-secondary-20: #4D3A19;
  --md-ref-secondary-30: #735726;
  --md-ref-secondary-40: #997433;
  --md-ref-secondary-50: #BF9040;
  --md-ref-secondary-60: #CCA766;
  --md-ref-secondary-70: #D9BD8C;
  --md-ref-secondary-80: #E6D3B3;
  --md-ref-secondary-90: #F2E9D9;
  --md-ref-secondary-95: #F9F4EC;
  --md-ref-secondary-98: #FCFBF7;
  --md-ref-secondary-99: #FEFDFB;
  --md-ref-secondary-100: #FFFFFF;

  --md-ref-tertiary-0: #000000;
  --md-ref-tertiary-10: #141F1C;
  --md-ref-tertiary-20: #293D38;
  --md-ref-tertiary-30: #3D5C54;
  --md-ref-tertiary-40: #527A70;
  --md-ref-tertiary-50: #66998C;
  --md-ref-tertiary-60: #85ADA3;
  --md-ref-tertiary-70: #A3C2BA;
  --md-ref-tertiary-80: #C2D6D1;
  --md-ref-tertiary-90: #E0EBE8;
  --md-ref-tertiary-95: #F0F5F4;
  --md-ref-tertiary-98: #F9FBFA;
  --md-ref-tertiary-99: #FCFDFD;
  --md-ref-tertiary-100: #FFFFFF;

  --md-ref-neutral-0: #000000;
  --md-ref-neutral-10: #1A181B;
  --md-ref-neutral-20: #353036;
  --md-ref-neutral-30: #4F4851;
  --md-ref-neutral-40: #6A606C;
  --md-ref-neutral-50: #847887;
  --md-ref-neutral-60: #9D939F;
  --md-ref-neutral-70: #B5AEB7;
  --md-ref-neutral-80: #CEC9CF;
  --md-ref-neutral-90: #E6E4E7;
  --md-ref-neutral-95: #F3F1F3;
  --md-ref-neutral-98: #FAFAFA;
  --md-ref-neutral-99: #FDFCFD;
  --md-ref-neutral-100: #FFFFFF;

  --md-ref-neutral-variant-0: #000000;
  --md-ref-neutral-variant-10: #1B161D;
  --md-ref-neutral-variant-20: #372D39;
  --md-ref-neutral-variant-30: #524356;
  --md-ref-neutral-variant-40: #6D5A72;
  --md-ref-neutral-variant-50: #89708F;
  --md-ref-neutral-variant-60: #A08DA5;
  --md-ref-neutral-variant-70: #B8A9BC;
  --md-ref-neutral-variant-80: #D0C6D2;
  --md-ref-neutral-variant-90: #E7E2E9;
  --md-ref-neutral-variant-95: #F3F1F4;
  --md-ref-neutral-variant-98: #FAF9FB;
  --md-ref-neutral-variant-99: #FDFCFD;
  --md-ref-neutral-variant-100: #FFFFFF;

  --md-ref-error-0: #000000;
  --md-ref-error-10: #290D0A;
  --md-ref-error-20: #521914;
  --md-ref-error-30: #7A261F;
  --md-ref-error-40: #A33329;
  --md-ref-error-50: #CC4033;
  --md-ref-error-60: #D6665C;
  --md-ref-error-70: #E08C85;
  --md-ref-error-80: #EBB3AD;
  --md-ref-error-90: #F5D9D6;
  --md-ref-error-95: #FAECEB;
  --md-ref-error-98: #FDF7F7;
  --md-ref-error-99: #FEFBFB;
  --md-ref-error-100: #FFFFFF;

  /* ======================================================================
     0b. MD3 SYSTEM COLOR ROLES — LIGHT THEME
     Standard MD3 light-scheme role -> tone assignments. Every role a real
     Material app would expect to reach for is defined here, whether or not
     something in this codebase uses it yet.
     ====================================================================== */
  --md-sys-color-primary: var(--md-ref-primary-40);
  --md-sys-color-on-primary: var(--md-ref-primary-100);
  --md-sys-color-primary-container: var(--md-ref-primary-90);
  --md-sys-color-on-primary-container: var(--md-ref-primary-10);

  --md-sys-color-secondary: var(--md-ref-secondary-40);
  --md-sys-color-on-secondary: var(--md-ref-secondary-100);
  --md-sys-color-secondary-container: var(--md-ref-secondary-90);
  --md-sys-color-on-secondary-container: var(--md-ref-secondary-10);

  --md-sys-color-tertiary: var(--md-ref-tertiary-40);
  --md-sys-color-on-tertiary: var(--md-ref-tertiary-100);
  --md-sys-color-tertiary-container: var(--md-ref-tertiary-90);
  --md-sys-color-on-tertiary-container: var(--md-ref-tertiary-10);

  --md-sys-color-error: var(--md-ref-error-40);
  --md-sys-color-on-error: var(--md-ref-error-100);
  --md-sys-color-error-container: var(--md-ref-error-90);
  --md-sys-color-on-error-container: var(--md-ref-error-10);

  --md-sys-color-background: var(--md-ref-neutral-98);
  --md-sys-color-on-background: var(--md-ref-neutral-10);
  --md-sys-color-surface: var(--md-ref-neutral-98);
  --md-sys-color-on-surface: var(--md-ref-neutral-10);
  --md-sys-color-surface-variant: var(--md-ref-neutral-variant-90);
  --md-sys-color-on-surface-variant: var(--md-ref-neutral-variant-30);

  /* Surface containers — MD3's tonal-elevation replacement for plain drop
     shadows: a raised surface gets a slightly stronger tint of the
     neutral-variant ramp instead of (or in addition to) a shadow, so
     elevation reads as "a slightly different, closer surface," not just
     "something with a shadow under it." */
  --md-sys-color-surface-dim: var(--md-ref-neutral-90);
  --md-sys-color-surface-bright: var(--md-ref-neutral-99);
  --md-sys-color-surface-container-lowest: var(--md-ref-neutral-100);
  --md-sys-color-surface-container-low: var(--md-ref-neutral-95);
  --md-sys-color-surface-container: var(--md-ref-neutral-variant-95);
  --md-sys-color-surface-container-high: var(--md-ref-neutral-variant-90);
  --md-sys-color-surface-container-highest: var(--md-ref-neutral-variant-80);

  --md-sys-color-outline: var(--md-ref-neutral-variant-50);
  --md-sys-color-outline-variant: var(--md-ref-neutral-variant-80);
  --md-sys-color-shadow: var(--md-ref-neutral-0);
  --md-sys-color-scrim: var(--md-ref-neutral-0);

  --md-sys-color-inverse-surface: var(--md-ref-neutral-20);
  --md-sys-color-inverse-on-surface: var(--md-ref-neutral-95);
  --md-sys-color-inverse-primary: var(--md-ref-primary-80);

  /* ======================================================================
     0c. MD3 STATE LAYER OPACITIES
     Standard MD3 interaction-state overlay opacities, applied on top of a
     component's content color (e.g. hover = on-surface at 8% laid over
     the resting fill). Component CSS mixes these with currentColor/
     content color as needed rather than hard-coding rgba() alphas inline.
     ====================================================================== */
  --md-sys-state-hover-opacity: 0.08;
  --md-sys-state-focus-opacity: 0.12;
  --md-sys-state-pressed-opacity: 0.12;
  --md-sys-state-dragged-opacity: 0.16;

  /* ======================================================================
     0d. MD3 SHAPE SCALE
     Standard named corner-radius roles. Existing --radius-* aliases
     (Section 4) map onto these directly.
     ====================================================================== */
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 999px;

  /* ======================================================================
     0e. MD3 ELEVATION
     Real Material elevation shadow recipe — TWO shadow layers (a sharper
     "key" shadow + a softer, more diffuse "ambient" shadow), per level
     0-5, using --md-sys-color-shadow (not a generic black) so tinted
     shadows stay warm rather than cold-grey. Paired with a surface-tint
     background (a faint wash of primary over the surface color) — MD3's
     actual mechanism for showing elevation on light surfaces, shadows
     alone read as weaker than real Material apps. Use
     --md-sys-elevation-N-shadow for box-shadow and mix
     --md-sys-color-primary into a surface at --md-sys-elevation-N-tint
     opacity for the tonal component, where a component wants the full
     effect (see styles.css's .chat-thread message bubbles / compose bar).
     ====================================================================== */
  --md-sys-elevation-0-shadow: none;
  --md-sys-elevation-0-tint: 0;

  --md-sys-elevation-1-shadow: 0 1px 2px rgba(32, 15, 36, 0.30), 0 1px 3px 1px rgba(32, 15, 36, 0.15);
  --md-sys-elevation-1-tint: 0.05;

  --md-sys-elevation-2-shadow: 0 1px 2px rgba(32, 15, 36, 0.30), 0 2px 6px 2px rgba(32, 15, 36, 0.15);
  --md-sys-elevation-2-tint: 0.08;

  --md-sys-elevation-3-shadow: 0 1px 3px rgba(32, 15, 36, 0.30), 0 4px 8px 3px rgba(32, 15, 36, 0.15);
  --md-sys-elevation-3-tint: 0.11;

  --md-sys-elevation-4-shadow: 0 2px 3px rgba(32, 15, 36, 0.30), 0 6px 10px 4px rgba(32, 15, 36, 0.15);
  --md-sys-elevation-4-tint: 0.12;

  --md-sys-elevation-5-shadow: 0 4px 4px rgba(32, 15, 36, 0.30), 0 8px 12px 6px rgba(32, 15, 36, 0.15);
  --md-sys-elevation-5-tint: 0.14;

  /* ======================================================================
     0f. MD3 TYPE SCALE — STRUCTURE
     Real MD3 role names/sizes (display/headline/title/body/label, each in
     large/medium/small), rendered in Noto Sans/Noto Sans Devanagari — see
     this file's header for why the typeface departs from stock Roboto.
     Sizes below are MD3's OWN reference values; the Narrator surface's
     legacy --font-size-narrator-* tokens (Section 2) intentionally scale
     WELL ABOVE these for the elderly-user accessibility floor — that's a
     supported MD3 pattern (Material's accessibility guidance explicitly
     allows/expects scaling the type scale up), not a deviation from it.
     ====================================================================== */
  --md-sys-typescale-display-large-size: 57px;
  --md-sys-typescale-display-large-line-height: 64px;
  --md-sys-typescale-display-medium-size: 45px;
  --md-sys-typescale-display-medium-line-height: 52px;
  --md-sys-typescale-display-small-size: 36px;
  --md-sys-typescale-display-small-line-height: 44px;

  --md-sys-typescale-headline-large-size: 32px;
  --md-sys-typescale-headline-large-line-height: 40px;
  --md-sys-typescale-headline-medium-size: 28px;
  --md-sys-typescale-headline-medium-line-height: 36px;
  --md-sys-typescale-headline-small-size: 24px;
  --md-sys-typescale-headline-small-line-height: 32px;

  --md-sys-typescale-title-large-size: 22px;
  --md-sys-typescale-title-large-line-height: 28px;
  --md-sys-typescale-title-medium-size: 16px;
  --md-sys-typescale-title-medium-line-height: 24px;
  --md-sys-typescale-title-small-size: 14px;
  --md-sys-typescale-title-small-line-height: 20px;

  --md-sys-typescale-body-large-size: 16px;
  --md-sys-typescale-body-large-line-height: 24px;
  --md-sys-typescale-body-medium-size: 14px;
  --md-sys-typescale-body-medium-line-height: 20px;
  --md-sys-typescale-body-small-size: 12px;
  --md-sys-typescale-body-small-line-height: 16px;

  --md-sys-typescale-label-large-size: 14px;
  --md-sys-typescale-label-large-line-height: 20px;
  --md-sys-typescale-label-medium-size: 12px;
  --md-sys-typescale-label-medium-line-height: 16px;
  --md-sys-typescale-label-small-size: 11px;
  --md-sys-typescale-label-small-line-height: 16px;


  /* ======================================================================
     1. COLOR — LEGACY ALIASES (now MD3-derived, names unchanged)
     Every existing component across both surfaces consumes ONLY these
     names — repointing the values here (not touching component files)
     propagates Material 3 everywhere at once. See file header.
     ====================================================================== */

  /* --- Brand / primary --- */
  --color-primary: var(--md-sys-color-primary);
  --color-primary-dark: var(--md-ref-primary-30);
  --color-primary-light: var(--md-ref-primary-70);
  --color-primary-tint-bg: var(--md-sys-color-primary-container);

  --color-warm-accent: var(--md-ref-secondary-50);
  --color-warm-accent-dark: var(--md-ref-secondary-30);
  --color-warm-accent-tint-bg: var(--md-sys-color-secondary-container);

  --color-dusk: var(--md-ref-tertiary-40);
  --color-dusk-tint-bg: var(--md-sys-color-tertiary-container);

  /* --- Neutrals --- */
  --color-bg-canvas: var(--md-sys-color-background);
  --color-bg-surface: var(--md-sys-color-surface-container-lowest);
  --color-bg-muted: var(--md-sys-color-surface-container-high);
  --color-border: var(--md-sys-color-outline-variant);
  --color-border-strong: var(--md-sys-color-outline);

  --color-text-primary: var(--md-sys-color-on-surface);
  --color-text-secondary: var(--md-sys-color-on-surface-variant);
  --color-text-muted: var(--md-ref-neutral-variant-50);
  --color-text-on-primary: var(--md-sys-color-on-primary);
  --color-text-on-accent: var(--md-sys-color-on-secondary-container);

  /* --- Gentle status colors (still deliberately non-clinical — see
         STYLE_GUIDE.md; now sourced from the MD3 ramps instead of ad hoc
         hex, same intent) --- */
  --color-status-warm: var(--md-ref-primary-30);
  --color-status-warm-bg: var(--md-sys-color-primary-container);
  --color-status-quiet: var(--md-ref-tertiary-30);
  --color-status-quiet-bg: var(--md-sys-color-tertiary-container);
  --color-status-gentle-note: var(--md-ref-tertiary-30);
  --color-status-gentle-note-bg: var(--md-sys-color-tertiary-container);

  /* --- Feedback --- */
  --color-feedback-error: var(--md-sys-color-error);
  --color-feedback-error-bg: var(--md-sys-color-error-container);
  --color-feedback-success: var(--md-ref-tertiary-20);
  --color-feedback-success-bg: var(--md-sys-color-tertiary-container);

  /* --- Focus ring --- */
  --color-focus-ring: var(--md-ref-tertiary-40);

  /* --- Narrator-surface specific --- */
  --color-narrator-button-fill: var(--md-sys-color-primary);
  --color-narrator-button-listening: var(--md-ref-secondary-50);
  --color-narrator-waveform: var(--md-ref-secondary-70);
  --color-narrator-bg: var(--md-sys-color-background);


  /* ======================================================================
     2. TYPOGRAPHY
     ====================================================================== */

  /* Anek Latin/Devanagari/Gurmukhi — a single matched-design type SYSTEM
     across scripts (see file header) rather than Noto Sans's neutral,
     document-font design. The stack still lists all three script fonts on
     every rule (not just --font-family-devanagari) because a body of text
     can legitimately mix scripts (e.g. an English name inside a Hindi
     sentence) and the browser needs a same-family fallback available for
     whichever glyphs Anek Latin itself doesn't cover, rather than dropping
     to a mismatched system font mid-sentence. */
  --font-family-base: "Anek Latin", "Anek Devanagari", "Anek Gurmukhi", -apple-system,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-family-devanagari: "Anek Devanagari", "Anek Latin", "Anek Gurmukhi", -apple-system,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-family-gurmukhi: "Anek Gurmukhi", "Anek Latin", "Anek Devanagari", -apple-system,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  /* --- NARRATOR type scale — still a floor, not a suggestion (see
         Section 0f's note on why this scales above MD3's own reference
         sizes; that's supported, not a deviation). --- */
  --font-size-narrator-button-label: 40px;
  --font-size-narrator-heading: 34px;
  --font-size-narrator-body: 28px;
  --font-size-narrator-caption: 24px;
  --line-height-narrator: 1.4;

  /* --- SPONSOR type scale --- */
  --font-size-sponsor-display: 32px;
  --font-size-sponsor-h1: 26px;
  --font-size-sponsor-h2: 21px;
  --font-size-sponsor-h3: 18px;
  --font-size-sponsor-body: 16px;
  --font-size-sponsor-body-small: 14px;
  --font-size-sponsor-caption: 13px;

  --font-scale-sponsor-default: 1;
  --font-scale-sponsor-large: 1.15;
  --font-scale-sponsor-xlarge: 1.3;


  /* ======================================================================
     3. SPACING — unchanged (base-8 already matches Material's own grid)
     ====================================================================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --touch-target-min: 48px;
  --touch-target-comfortable: 64px;
  --touch-target-narrator-min: 96px;
  --touch-target-narrator-primary: 280px;
  --touch-target-narrator-primary-desktop: 340px;
  /* New (16 Aug 2026): the chat screen's compose action button — an MD3
     FAB-scale circular button, deliberately smaller than the old single
     giant button now that voice is one of two input methods, not the
     entire UI. Still well above Material's own 48dp default and iOS's
     44pt, per Sam's "don't dumb it down" direction paired with continued
     real accessibility for an elderly audience. */
  --touch-target-narrator-compose: 64px;


  /* ======================================================================
     4. RADIUS — now the real MD3 shape scale (Section 0d), same names
     ====================================================================== */
  --radius-sm: var(--md-sys-shape-corner-small);
  --radius-md: var(--md-sys-shape-corner-medium);
  --radius-lg: var(--md-sys-shape-corner-large);
  --radius-xl: var(--md-sys-shape-corner-extra-large);
  --radius-full: var(--md-sys-shape-corner-full);


  /* ======================================================================
     5. ELEVATION / SHADOW — legacy aliases onto the real MD3 elevation
     levels (Section 0e). Narrator button glow kept as its own thing (a
     glow isn't a standard MD3 elevation shadow, and still serves the
     "presence, not a panel" role it always did).
     ====================================================================== */
  --shadow-color: 32, 15, 36;

  --shadow-xs: var(--md-sys-elevation-1-shadow);
  --shadow-sm: var(--md-sys-elevation-2-shadow);
  --shadow-md: var(--md-sys-elevation-3-shadow);
  --shadow-lg: var(--md-sys-elevation-4-shadow);

  --shadow-narrator-button-resting: 0 0 0 12px rgba(128, 59, 145, 0.08),
                                     0 8px 24px rgba(128, 59, 145, 0.20);
  --shadow-narrator-button-listening: 0 0 0 20px rgba(153, 116, 51, 0.14),
                                       0 8px 28px rgba(153, 116, 51, 0.30);


  /* ======================================================================
     6. MOTION — unchanged
     ====================================================================== */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 500ms;
  --duration-breathing-pulse: 2800ms;
  --duration-listening-pulse: 1200ms;
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-gentle: cubic-bezier(0.33, 0, 0.2, 1);


  /* ======================================================================
     7. Z-INDEX SCALE — unchanged
     ====================================================================== */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky-nav: 100;
  --z-overlay: 500;
  --z-modal: 900;
  --z-toast: 1000;
}