/* ─────────────────────────────────────────────────────────────────────────
   Edara CRM — Design Tokens (MD3 + legacy aliases)

   Tier 1: --md-sys-* tokens are the single source of truth (Material Design 3).
   Tier 2: legacy --color-*, --space-*, --radius-*, --shadow-* names alias the
           MD3 tokens so existing CSS (1,439 references in app.css and views)
           keeps working unchanged.

   Light is default. Dark is opt-in via [data-theme="dark"] on <html>.

   ── MD3 migration, phase 1 (values only; no component CSS touched) ────────
   Source: docs/ux-redesign/prototype.html + UX-REVIEW.html.

     · primary moves to MD3 tone 40 and to the Edara portal's exact value
       (#00629d light / #99cbff dark). The old #003355 was tone ~22 — darker
       than MD3 puts light primary, and a different colour from every other
       product in the suite. Gold #f7be00 stays the brand signature (tertiary).
     · surface roles become a neutral tonal ladder. This is the change that
       lets the 144 [data-theme="dark"] component overrides in app.css retire:
       components read one ladder and both themes resolve it.
     · new: typescale, state-layer, and expanded motion tokens — the three
       axes app.css then hardcoded per component (every px text size now
       reads the typescale; see the ramp below).
     · new: semantic stage pairs, derived from the md-sys roles. They carry
       the --chip-* names, the ones app.css reads (one name per role).

   This file is custom properties only. The base element rules (box-sizing,
   body, headings) live at the top of app.css, so the Creator console can
   link these tokens without the app's base styles.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* ── MD3 Color: brand primary (tone 40 — matches extensions-portal) ───── */
  --md-sys-color-primary:               #00629d;
  --md-sys-color-on-primary:            #ffffff;
  --md-sys-color-primary-container:     #cde5ff;
  --md-sys-color-on-primary-container:  #001d31;
  --md-sys-color-primary-fixed:         #cde5ff;
  --md-sys-color-primary-fixed-dim:     #99cbff;
  --md-sys-color-inverse-primary:       #99cbff;

  /* ── MD3 Color: secondary ────────────────────────────────────────────── */
  --md-sys-color-secondary:             #4f6070;
  --md-sys-color-on-secondary:          #ffffff;
  --md-sys-color-secondary-container:   #d3e4f5;
  --md-sys-color-on-secondary-container: #0b1d29;

  /* ── MD3 Color: tertiary (CRM gold accent) ───────────────────────────── */
  --md-sys-color-tertiary:              #785a00;
  --md-sys-color-on-tertiary:           #ffffff;
  --md-sys-color-tertiary-container:    #ffdf99;
  --md-sys-color-on-tertiary-container: #251a00;

  /* ── MD3 Color: error / success / warning ────────────────────────────── */
  --md-sys-color-error:                 #ba1a1a;
  --md-sys-color-on-error:              #ffffff;
  --md-sys-color-error-container:       #ffdad6;
  --md-sys-color-on-error-container:    #410002;
  --md-sys-color-success:               #1f7a3a;
  --md-sys-color-on-success:            #ffffff;
  --md-sys-color-success-container:     #b9f0c2;
  --md-sys-color-on-success-container:  #00210b;
  --md-sys-color-warning:               #815512;
  --md-sys-color-on-warning:            #ffffff;
  --md-sys-color-warning-container:     #ffddb3;
  --md-sys-color-on-warning-container:  #2a1800;

  /* ── MD3 Color: surfaces (light) — neutral tonal ladder ──────────────── */
  --md-sys-color-surface:                    #f9f9fc;
  --md-sys-color-on-surface:                 #191c20;
  --md-sys-color-surface-variant:            #e8edf4;
  --md-sys-color-on-surface-variant:         #42474e;
  --md-sys-color-surface-container-lowest:   #ffffff;
  --md-sys-color-surface-container-low:      #f3f3f7;
  --md-sys-color-surface-container:          #edeef2;
  --md-sys-color-surface-container-high:     #e7e8ec;
  --md-sys-color-surface-container-highest:  #e1e2e7;
  --md-sys-color-surface-bright:             #f9f9fc;
  --md-sys-color-surface-dim:                #d9dade;
  --md-sys-color-surface-tint:               var(--md-sys-color-primary);
  --md-sys-color-inverse-surface:            #2e3135;
  --md-sys-color-inverse-on-surface:         #eff1f5;
  /* MD3 scrim is opaque black; the 32% is applied where it is drawn
     (color-mix at the use site), so the role stays a colour like every other. */
  --md-sys-color-scrim:                      #000000;
  --md-sys-color-shadow:                     #000000;

  /* ── MD3 Color: outlines ─────────────────────────────────────────────── */
  --md-sys-color-outline:           #72787f;
  --md-sys-color-outline-variant:   #c2c7ce;

  /* Card surface. Lowest is white in light but the darkest step in dark,
     which sank cards below the page; dark uses MD3's elevated-card role,
     surface-container-low. */
  --crm-card-surface: var(--md-sys-color-surface-container-lowest);

  /* ── MD3 Shape (corner radius) ───────────────────────────────────────── */
  --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:        9999px;

  /* ── MD3 Elevation ───────────────────────────────────────────────────────
     MD3's key + ambient shadow pairs for levels 1–5 (1/3/6/8/12dp). The
     surface-container ladder above stays the primary elevation signal;
     these shadows assist it, which is why dark keeps the same values. */
  --md-sys-elevation-0: none;
  --md-sys-elevation-1: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15);
  --md-sys-elevation-2: 0 1px 2px rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15);
  --md-sys-elevation-3: 0 1px 3px rgba(0,0,0,.3), 0 4px 8px 3px rgba(0,0,0,.15);
  --md-sys-elevation-4: 0 2px 3px rgba(0,0,0,.3), 0 6px 10px 4px rgba(0,0,0,.15);
  --md-sys-elevation-5: 0 4px 4px rgba(0,0,0,.3), 0 8px 12px 6px rgba(0,0,0,.15);

  /* ── MD3 State layer opacities ───────────────────────────────────────────
     app.css had no press/hover feedback vocabulary at all; phase 2 added the
     state layer that reads these (see “MD3 STATE LAYER” in app.css). */
  --md-sys-state-hover:   .08;
  --md-sys-state-focus:   .10;
  --md-sys-state-pressed: .10;
  --md-sys-state-dragged: .16;

  /* ── App-chrome heights ──────────────────────────────────────────────────
     MD3 small top app bar and navigation bar. Everything positioned against
     them (side panels, the mobile drawer, FABs and pills above the bottom
     bar) reads these. */
  --md-top-app-bar-h: 64px;
  --md-nav-bar-h: 80px;

  /* ── MD3 Motion ──────────────────────────────────────────────────────── */
  --md-sys-motion-easing-linear:               cubic-bezier(0, 0, 1, 1);
  --md-sys-motion-easing-standard:             cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-standard-accelerate:  cubic-bezier(0.3, 0, 1, 1);
  --md-sys-motion-easing-standard-decelerate:  cubic-bezier(0, 0, 0, 1);
  --md-sys-motion-easing-emphasized:           cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-sys-motion-duration-short1:  50ms;
  --md-sys-motion-duration-short2:  100ms;
  --md-sys-motion-duration-short3:  150ms;
  --md-sys-motion-duration-short4:  200ms;
  --md-sys-motion-duration-medium1: 250ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-medium3: 350ms;
  --md-sys-motion-duration-medium4: 400ms;
  --md-sys-motion-duration-long1:   450ms;
  --md-sys-motion-duration-long2:   500ms;
  --md-sys-motion-duration-long3:   550ms;
  --md-sys-motion-duration-long4:   600ms;

  /* ── MD3 Typography: the ramp ────────────────────────────────────────────
     Every px text size in app.css and the views is one of these steps (icons
     excepted: MD3 sizes them apart). Rules mostly take only the -size; a
     token's role name is a size step there, not a claim about the role.
     `body-dense` is a deliberate CRM addition — a CRM is a dense data product
     and MD3's 14px body is too loose for table rows. */
  --md-sys-typescale-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --md-sys-typescale-display-large-size:     57px;
  --md-sys-typescale-display-large-line:     64px;
  --md-sys-typescale-display-large-weight:   400;
  --md-sys-typescale-display-large-tracking: -0.25px;
  --md-sys-typescale-display-medium-size:     45px;
  --md-sys-typescale-display-medium-line:     52px;
  --md-sys-typescale-display-medium-weight:   400;
  --md-sys-typescale-display-medium-tracking: 0;
  --md-sys-typescale-display-small-size:     36px;
  --md-sys-typescale-display-small-line:     44px;
  --md-sys-typescale-display-small-weight:   400;
  --md-sys-typescale-display-small-tracking: 0;

  --md-sys-typescale-headline-large-size:   32px;
  --md-sys-typescale-headline-large-line:   40px;
  --md-sys-typescale-headline-large-weight: 400;
  --md-sys-typescale-headline-large-tracking: 0;
  --md-sys-typescale-headline-medium-size:   28px;
  --md-sys-typescale-headline-medium-line:   36px;
  --md-sys-typescale-headline-medium-weight: 400;
  --md-sys-typescale-headline-medium-tracking: 0;
  --md-sys-typescale-headline-small-size:    24px;
  --md-sys-typescale-headline-small-line:    32px;
  --md-sys-typescale-headline-small-weight:  400;
  --md-sys-typescale-headline-small-tracking: 0;

  --md-sys-typescale-title-large-size:    22px;
  --md-sys-typescale-title-large-line:    28px;
  --md-sys-typescale-title-large-weight:  400;
  --md-sys-typescale-title-large-tracking: 0;
  --md-sys-typescale-title-medium-size:   16px;
  --md-sys-typescale-title-medium-line:   24px;
  --md-sys-typescale-title-medium-weight: 500;
  --md-sys-typescale-title-medium-tracking: 0.15px;
  --md-sys-typescale-title-small-size:    14px;
  --md-sys-typescale-title-small-line:    20px;
  --md-sys-typescale-title-small-weight:  500;
  --md-sys-typescale-title-small-tracking: 0.1px;

  --md-sys-typescale-body-large-size:   16px;
  --md-sys-typescale-body-large-line:   24px;
  --md-sys-typescale-body-large-weight: 400;
  --md-sys-typescale-body-large-tracking: 0.5px;
  --md-sys-typescale-body-medium-size:   14px;
  --md-sys-typescale-body-medium-line:   20px;
  --md-sys-typescale-body-medium-weight: 400;
  --md-sys-typescale-body-medium-tracking: 0.25px;
  --md-sys-typescale-body-small-size:    12px;
  --md-sys-typescale-body-small-line:    16px;
  --md-sys-typescale-body-small-weight:  400;
  --md-sys-typescale-body-small-tracking: 0.4px;
  /* CRM dense data variant — table rows, card meta */
  --md-sys-typescale-body-dense-size:    13px;
  --md-sys-typescale-body-dense-line:    18px;
  --md-sys-typescale-body-dense-weight:  400;
  --md-sys-typescale-body-dense-tracking: 0.25px;

  --md-sys-typescale-label-large-size:   14px;
  --md-sys-typescale-label-large-line:   20px;
  --md-sys-typescale-label-large-weight: 500;
  --md-sys-typescale-label-large-tracking: 0.1px;
  --md-sys-typescale-label-medium-size:   12px;
  --md-sys-typescale-label-medium-line:   16px;
  --md-sys-typescale-label-medium-weight: 500;
  --md-sys-typescale-label-medium-tracking: 0.5px;
  --md-sys-typescale-label-small-size:    11px;
  --md-sys-typescale-label-small-line:    16px;
  --md-sys-typescale-label-small-weight:  500;
  --md-sys-typescale-label-small-tracking: 0.5px;

  --font-display: var(--md-sys-typescale-font);
  --font-body:    var(--md-sys-typescale-font);
  --font-mono:    'Consolas', 'JetBrains Mono', ui-monospace, monospace;

  /* ── Legacy CRM aliases — every existing var() lookup keeps working ──── */
  --color-primary:               var(--md-sys-color-primary);
  --color-primary-text:          var(--md-sys-color-primary); /* text-safe variant, AA on light surfaces */
  --color-primary-container:     var(--md-sys-color-primary-container);
  --color-primary-fixed:         var(--md-sys-color-primary-fixed);
  --color-primary-fixed-dim:     var(--md-sys-color-primary-fixed-dim);
  --color-primary-bright:        #01639e;
  --color-gold:                  #f7be00; /* brand gold; tertiary is its tone-40 text variant */

  /* ── Chart palette ────────────────────────────────────────────────────
     Categorical hues for ranked charts (one per bucket, cycling past eight)
     plus the three semantic ones a status split uses. They were inline hex
     literals in analytics.js with no dark variant, which is why the report
     block needed [data-theme="dark"] overrides to stay legible. Tokens are
     also what lets a dashboard tile and a report draw the same colours. */
  --chart-cat-1: #c9a032;
  --chart-cat-2: #d68bc3;
  --chart-cat-3: #f0a187;
  --chart-cat-4: #4fb8b3;
  --chart-cat-5: #7c8db5;
  --chart-cat-6: #95d089;
  --chart-cat-7: #e5704c;
  --chart-cat-8: #8e7cc3;
  --chart-pos:     #65b27c;
  --chart-neg:     #e26a6a;
  --chart-info:    #5b8def;
  --chart-neutral: #9aa0a6;
  /* Board stage ring: a stage row has no colour of its own, so the board gives
     each its place in this ring (deals.js). Tokens rather than JS hex so the
     dots and share bars lift in dark mode like every other colour. */
  --stage-ring-1: #64748b;
  --stage-ring-2: #0b84b8;
  --stage-ring-3: #7a5af8;
  --stage-ring-4: #d98a00;
  --stage-ring-5: #1f9d55;
  --stage-ring-6: #c2410c;
  --stage-ring-7: #0f8a7e;
  --stage-ring-8: #db2777;
  /* Gold is deliberately the same value in both themes, so the ink that sits on
     it has to be theme-invariant too — on-tertiary flips per scheme and cannot
     be used here. */
  --color-on-gold:               #251a00;

  --color-surface:               var(--md-sys-color-surface);
  --color-surface-container-low: var(--md-sys-color-surface-container-low);
  --color-surface-container:     var(--md-sys-color-surface-container);
  --color-surface-container-high: var(--md-sys-color-surface-container-high);
  --color-surface-container-highest: var(--md-sys-color-surface-container-highest);
  --color-surface-container-lowest:  var(--md-sys-color-surface-container-lowest);
  --color-surface-variant:       var(--md-sys-color-surface-variant);
  --color-surface-dim:           var(--md-sys-color-surface-dim);
  --color-surface-bright:        var(--md-sys-color-surface-bright);
  --color-inverse-surface:       var(--md-sys-color-inverse-surface);
  --color-inverse-on-surface:    var(--md-sys-color-inverse-on-surface);

  --color-on-surface:       var(--md-sys-color-on-surface);
  --color-on-surface-var:   var(--md-sys-color-on-surface-variant);
  /* WhatsApp's own green, for its mark beside a phone number (_callButton.js). */
  --color-whatsapp: #25D366;
  --color-on-primary:       var(--md-sys-color-on-primary);
  --color-on-primary-container: var(--md-sys-color-on-primary-container);
  --color-on-secondary-container: var(--md-sys-color-on-secondary-container);

  --color-outline:          var(--md-sys-color-outline);
  --color-outline-variant:  var(--md-sys-color-outline-variant);

  --color-secondary:           var(--md-sys-color-secondary);
  --color-secondary-container: var(--md-sys-color-secondary-container);
  --color-tertiary-container:    var(--md-sys-color-tertiary-container);
  --color-on-tertiary-container: var(--md-sys-color-on-tertiary-container);

  --color-success:    var(--md-sys-color-success);
  --color-on-success: var(--md-sys-color-on-success);
  --color-success-text: #1B5E20; /* text-safe variant, AA on light surfaces */
  --color-success-bg: var(--md-sys-color-success-container);
  --color-error:      var(--md-sys-color-error);
  --color-error-container: var(--md-sys-color-error-container);
  --color-on-error:   var(--md-sys-color-on-error);
  --color-on-error-container: var(--md-sys-color-on-error-container);
  --color-warning:    var(--md-sys-color-warning);
  --color-warning-bg: var(--md-sys-color-warning-container);
  --color-warning-text: var(--md-sys-color-on-warning-container);

  /* ── Stage chip palette ──────────────────────────────────────────────────
     Six stage pairs replacing 12 raw hex pairs: five derived from md-sys roles
     so retuning a role cannot leave the stage palette behind, negotiation
     literal because MD3 has no purple role. */
  --chip-lead-bg:          var(--md-sys-color-primary-container);
  --chip-lead-text:        var(--md-sys-color-on-primary-container);
  --chip-qualified-bg:     var(--md-sys-color-success-container);
  --chip-qualified-text:   var(--md-sys-color-on-success-container);
  --chip-proposal-bg:      var(--md-sys-color-warning-container);
  --chip-proposal-text:    var(--md-sys-color-on-warning-container);
  --chip-won-bg:           var(--md-sys-color-success-container);
  --chip-won-text:         var(--md-sys-color-on-success-container);
  --chip-lost-bg:          var(--md-sys-color-error-container);
  --chip-lost-text:        var(--md-sys-color-on-error-container);
  --chip-negotiation-bg: #e9ddff;  --chip-negotiation-text: #22005d;

  --stage-bar-past:    #5b7287;  /* was #c1d9eb — white text on it = 1.4:1; #5b7287 = 5.0:1 (WCAG 1.4.3) */
  --stage-bar-active:  #1f7a3a;
  --stage-bar-future:  #e8edf4;
  --stage-bar-text-past:    #ffffff;
  --stage-bar-text-active:  #ffffff;
  --stage-bar-text-future:  #5b6471;
  --stage-bar-won:     #1f7a3a;
  --stage-bar-lost:    #c2392d;

  /* Radius aliases */
  --radius-s:    var(--md-sys-shape-corner-extra-small);
  --radius-m:    var(--md-sys-shape-corner-small);
  --radius-l:    var(--md-sys-shape-corner-medium);
  --radius-xl:   var(--md-sys-shape-corner-large);
  --radius-pill: var(--md-sys-shape-corner-full);
  /* These sit one step below the MD3 names (--radius-m is 8px = corner-small).
     New CSS uses the --md-sys-shape-corner-* tokens directly. */

  /* Shadow aliases */
  --shadow-1:         var(--md-sys-elevation-1);
  --shadow-2:         var(--md-sys-elevation-2);
  --shadow-3:         var(--md-sys-elevation-3);
  --shadow-signature: 0px 20px 40px rgba(0, 74, 121, 0.06);

  /* Spacing — kept independent (MD3 has no spacing scale spec) */
  /* --sp-3 is the 12px step the --space-* scale below lacks.
     See docs/ux-redesign/README.md. */
  --sp-3: 12px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;

  color-scheme: light;
}

/* ─────────────────────────────────────────────────────────────────────────
   DARK THEME — opt-in via [data-theme="dark"] on <html>
   Brand stays consistent; only surfaces, text, and inverse swap.

   Every X / on-X pair below clears WCAG AA (4.5:1). Verified by
   docs/ux-redesign/verify-tokens.mjs.
   ───────────────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --md-sys-color-primary:               #99cbff;  /* matches extensions-portal dark primary */
  --md-sys-color-on-primary:            #003351;
  --md-sys-color-primary-container:     #004a74;
  --md-sys-color-on-primary-container:  #cde5ff;
  --md-sys-color-primary-fixed:         #cde5ff;
  --md-sys-color-primary-fixed-dim:     #97cbff;
  --md-sys-color-inverse-primary:       #00629d;

  --md-sys-color-secondary:             #b7c9d9;
  --md-sys-color-on-secondary:          #22323f;
  --md-sys-color-secondary-container:   #384956;
  --md-sys-color-on-secondary-container: #d3e4f5;

  --md-sys-color-tertiary:              #f7be00; /* brand gold survives dark unchanged */
  --md-sys-color-on-tertiary:           #3f2e00;
  --md-sys-color-tertiary-container:    #5b4300;
  --md-sys-color-on-tertiary-container: #ffdf99;

  --md-sys-color-error:                 #ffb4ab;
  --md-sys-color-on-error:              #690005;
  --md-sys-color-error-container:       #93000a;
  --md-sys-color-on-error-container:    #ffdad6;
  --md-sys-color-success:               #8ed99c;
  --md-sys-color-on-success:            #003917;
  --md-sys-color-success-container:     #005322;
  --md-sys-color-on-success-container:  #b9f0c2;
  --md-sys-color-warning:               #f5bd6f;
  --md-sys-color-on-warning:            #442b00;
  --md-sys-color-warning-container:     #613f00;
  --md-sys-color-on-warning-container:  #ffddb3;

  --md-sys-color-surface:                    #111418;
  --md-sys-color-on-surface:                 #e1e2e7;
  --md-sys-color-surface-variant:            #42474e;
  --md-sys-color-on-surface-variant:         #c2c7ce;
  --md-sys-color-surface-container-lowest:   #0c0e12;
  --md-sys-color-surface-container-low:      #191c20;
  --md-sys-color-surface-container:          #1d2024;
  --md-sys-color-surface-container-high:     #272a2e;
  --md-sys-color-surface-container-highest:  #323539;
  --md-sys-color-surface-bright:             #37393e;
  --md-sys-color-surface-dim:                #111418;
  --md-sys-color-inverse-surface:            #e1e2e7;
  --md-sys-color-inverse-on-surface:         #2e3135;

  --md-sys-color-outline:          #8c9199;
  --md-sys-color-outline-variant:  #42474e;

  --crm-card-surface: var(--md-sys-color-surface-container-low);


  --color-primary-bright: #99cbff;
  --color-primary-text: #99cbff;
  --color-gold: #f7be00;

  /* Chart palette, dark: same hues lifted for contrast on a dark ground. */
  --chart-cat-1: #dcb84f;
  --chart-cat-2: #e3a3d5;
  --chart-cat-3: #f5b39e;
  --chart-cat-4: #6bcfca;
  --chart-cat-5: #9aa9cd;
  --chart-cat-6: #a9dd9e;
  --chart-cat-7: #f08a68;
  --chart-cat-8: #a897d8;
  --chart-pos:     #7ec994;
  --chart-neg:     #ef8585;
  --chart-info:    #7ea6f2;
  --chart-neutral: #aab0b8;
  --stage-ring-1: #94a3b8;
  --stage-ring-2: #4fb3e0;
  --stage-ring-3: #a48bff;
  --stage-ring-4: #f0b040;
  --stage-ring-5: #4cc27f;
  --stage-ring-6: #f27a45;
  --stage-ring-7: #3fbfb0;
  --stage-ring-8: #f06aa8;
  --color-success-text: var(--md-sys-color-success);
  --shadow-signature: 0px 20px 40px rgba(0, 0, 0, 0.4);

  /* The role-derived stage chips follow their md-sys roles automatically; only
     negotiation, which has no role, needs dark values of its own. */
  --chip-negotiation-bg: #4f378a;  --chip-negotiation-text: #e9ddff;

  /* Stage bars tuned for WCAG 1.4.3 — white text on active/won #15803d = 5.0:1,
     on lost #dc2626 = 4.8:1 */
  --stage-bar-past:    #2c4a66;
  --stage-bar-active:  #15803d;
  --stage-bar-future:  #243044;
  --stage-bar-text-past:    #cbd5e1;
  --stage-bar-text-active:  #ffffff;
  --stage-bar-text-future:  #98a8c0;
  --stage-bar-won:     #15803d;
  --stage-bar-lost:    #dc2626;

  color-scheme: dark;
}

/* Honouring the preference at the token zeroes motion for every consumer at
   once, instead of each component carrying its own reduced-motion override. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --md-sys-motion-duration-short1:  0s;
    --md-sys-motion-duration-short2:  0s;
    --md-sys-motion-duration-short3:  0s;
    --md-sys-motion-duration-short4:  0s;
    --md-sys-motion-duration-medium1: 0s;
    --md-sys-motion-duration-medium2: 0s;
    --md-sys-motion-duration-medium3: 0s;
    --md-sys-motion-duration-medium4: 0s;
    --md-sys-motion-duration-long1:   0s;
    --md-sys-motion-duration-long2:   0s;
    --md-sys-motion-duration-long3:   0s;
    --md-sys-motion-duration-long4:   0s;
  }
}