rift-ds 1.0.0

package/tokens/tokens-dark.css

@@ -0,0 +1,186 @@
+/* ============================================
+   SEMANTIC TOKENS — DARK THEME
+   Applied when data-theme="dark" is set
+   Every value chains to tokens-primitives.css
+   (validated by scripts/validate-token-references.mjs)
+   ============================================ */
+
+[data-theme="dark"] {
+  /* Text */
+  --color-text-primary: var(--primitive-neutral-01);
+  --color-text-secondary: var(--primitive-neutral-03);
+  --color-text-tertiary: var(--primitive-neutral-04);
+  --color-text-inverse: var(--primitive-neutral-07);
+  --color-text-on-inverse: var(--primitive-neutral-09);
+
+  /* Icon */
+  --color-icon-primary: var(--primitive-neutral-02);
+  --color-icon-secondary: var(--primitive-neutral-04);
+
+  /* Background - Page */
+  --color-bg-page-primary: var(--primitive-neutral-10);
+  --color-bg-page-inverse: var(--primitive-neutral-01);
+
+  /* Background - Container */
+  --color-bg-container-primary: var(--primitive-neutral-09-a80);
+  --color-bg-container-primary-transparent: var(--primitive-neutral-09-a01);
+  --color-bg-container-primary-semi: var(--primitive-neutral-09-a60);
+  --color-bg-container-secondary: var(--primitive-neutral-07);
+  --color-bg-container-tertiary: var(--primitive-neutral-08);
+  --color-bg-container-inverse: var(--primitive-neutral-01);
+  --color-bg-container-border: var(--primitive-neutral-08);
+  --color-bg-glass: var(--primitive-neutral-09-a66);
+
+  /* Divider */
+  --color-divider: var(--primitive-neutral-08-a80);
+
+  /* Chat bubbles — alias the same roles as light; the underlying container
+     and text tokens carry the theme swap. */
+  --color-chat-bubble-sent-bg: var(--color-bg-container-secondary);
+  --color-chat-bubble-sent-text: var(--color-text-primary);
+  --color-chat-bubble-received-bg: var(--color-bg-container-secondary);
+  --color-chat-bubble-received-text: var(--color-text-primary);
+  /* The composer's context note — one step off the #050505 shell */
+  --color-chat-context-bg: var(--primitive-neutral-09);
+
+  /* Calendar surfaces — the dark values are the reason this family exists:
+     the container ramp's second step (#303030) glares at calendar density, so
+     cells rest on the semi neutral-08 (≈#1E over the calendar container) and
+     hover one gentle step up to the semi neutral-07 (≈#2C). The pill hover
+     takes the resting cell tint — a step darker than the hovered cell it sits
+     on — and the hover-only border ring is an obvious mid-grey that reads
+     against both cell states. */
+  --color-calendar-cell-bg: var(--primitive-neutral-08-a80);
+  --color-calendar-cell-bg-hover: var(--primitive-neutral-07-a80);
+  --color-calendar-event-bg: var(--color-bg-container-primary);
+  --color-calendar-event-bg-hover: var(--color-calendar-cell-bg);
+  --color-calendar-event-border: var(--primitive-neutral-06);
+
+  /* Overlay & controls */
+  --color-scrim: var(--primitive-true-black-strong);
+  --color-control-thumb: var(--color-action-primary-text);
+
+  /* Elevation — stronger opacity so shadows read against the #050505 floor */
+  --shadow-floating: 0 4px 16px rgba(0, 0, 0, 0.55);
+  --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.6);
+
+  /* Action - Primary. Inverted from light: the fill is the light half of
+     the teal ramp under a dark label, because a dark fill cannot clear 3:1
+     against the near-black page. Hover and active brighten rather than
+     deepen, so the fill walks toward the page's opposite, not into it. */
+  --color-action-primary-bg: var(--primitive-teal-05);
+  --color-action-primary-bg-hover: var(--primitive-teal-04);
+  --color-action-primary-bg-active: var(--primitive-teal-03);
+  --color-action-primary-text: var(--primitive-teal-10);
+  --color-action-primary-text-active: var(--primitive-teal-10);
+  --color-action-primary-text-secondary: var(--primitive-teal-10);
+  --color-action-primary-text-tertiary: var(--primitive-teal-04);
+  --color-action-primary-border: var(--primitive-teal-05);
+  --color-action-primary-border-secondary: var(--primitive-teal-06);
+  --color-action-primary-border-tertiary: var(--primitive-teal-04);
+
+  /* Action - Icon. The active icon sits on the hover/active fills, which
+     are the light half of the ramp here — so it inverts with the label. */
+  --color-action-icon-default: var(--primitive-neutral-01);
+  --color-action-icon-active: var(--primitive-teal-10);
+
+  /* Action - Passive (Secondary button) */
+  --color-action-passive-text: var(--primitive-neutral-01);
+  --color-action-passive-bg: var(--primitive-neutral-09-a01);
+  --color-action-passive-bg-hover: var(--primitive-neutral-08-a80);
+  --color-action-passive-bg-active: var(--primitive-neutral-07-a80);
+
+  /* Action - Neutral (grey filled buttons). The fill stays visible at
+     rest, one step above the container greys; hover and active brighten
+     toward the page's opposite, like the primary family. */
+  --color-action-neutral-bg: var(--primitive-neutral-08);
+  --color-action-neutral-bg-hover: var(--primitive-neutral-07);
+  --color-action-neutral-bg-active: var(--primitive-neutral-06);
+  --color-action-neutral-text: var(--primitive-neutral-01);
+
+  /* Status - Positive */
+  --color-status-positive-bg: var(--primitive-green-10);
+  --color-status-positive-border: var(--primitive-green-07);
+  --color-status-positive-text: var(--primitive-green-01);
+  --color-status-positive-icon: var(--primitive-green-07);
+
+  /* Status - Warning */
+  --color-status-warning-bg: var(--primitive-orange-10);
+  --color-status-warning-border: var(--primitive-orange-07);
+  --color-status-warning-text: var(--primitive-orange-01);
+  --color-status-warning-icon: var(--primitive-orange-07);
+
+  /* Status - Error */
+  --color-status-error-bg: var(--primitive-red-10);
+  --color-status-error-border: var(--primitive-red-07);
+  --color-status-error-text: var(--primitive-red-01);
+  --color-status-error-icon: var(--primitive-red-06);
+
+  /* Status - Info */
+  --color-status-info-bg: var(--primitive-blue-10);
+  --color-status-info-border: var(--primitive-blue-07);
+  --color-status-info-text: var(--primitive-blue-01);
+  --color-status-info-icon: var(--primitive-blue-05);
+
+  /* Status - Neutral */
+  --color-status-neutral-bg: var(--primitive-neutral-08);
+  --color-status-neutral-border: var(--primitive-neutral-06);
+  --color-status-neutral-text: var(--primitive-neutral-01);
+  --color-status-neutral-icon: var(--primitive-neutral-04);
+
+  /* The -icon step (status glyphs on plain surfaces) runs brighter here
+     than the light-theme inks: mid-ramp hues that hold ≥3:1 on the dark
+     container floor, where the near-white -text tints all read as grey. */
+
+  /* AI - The gradient accent: the same luminous stops as light. One set
+     works on both floors, so the AI signature never shifts hue with the
+     theme. */
+  --color-ai-gradient-start: var(--primitive-red-05);
+  --color-ai-gradient-mid: var(--primitive-blue-05);
+  --color-ai-gradient-end: var(--primitive-teal-07);
+  /* The AI button's solid field: deeper than the neutral-10 page floor, so
+     the pill reads as a cut-out of true darkness under the luminous ring. */
+  --color-ai-button-bg: var(--primitive-true-black);
+
+  /* Chart - Contribution heatmap ramp (level 0 = none → level 4 = most) */
+  --color-chart-contribution-0: var(--primitive-neutral-08);
+  --color-chart-contribution-1: var(--primitive-green-10);
+  --color-chart-contribution-2: var(--primitive-green-09);
+  --color-chart-contribution-3: var(--primitive-green-08);
+  --color-chart-contribution-4: var(--primitive-green-07);
+
+  /* Chart - Ordered series ramp for multi-series charts. Series 1 follows
+     the action teal (theme-split with it); 2-7 alias the core accents, so
+     re-theming an accent re-themes every chart that uses its slot. */
+  --color-chart-series-1: var(--color-action-primary-bg);
+  --color-chart-series-2: var(--color-core-accent-mint);
+  --color-chart-series-3: var(--color-core-accent-gold);
+  --color-chart-series-4: var(--color-core-accent-coral);
+  --color-chart-series-5: var(--color-core-accent-violet);
+  --color-chart-series-6: var(--color-core-accent-amber);
+  --color-chart-series-7: var(--color-core-accent-cobalt);
+
+  /* Input */
+  --color-input-text-primary: var(--primitive-neutral-01);
+  --color-input-text-placeholder: var(--primitive-neutral-04);
+  --color-input-text-disabled: var(--primitive-neutral-07);
+  --color-input-text-inverse: var(--primitive-neutral-07);
+  --color-input-border-primary: var(--primitive-neutral-08);
+  --color-input-border-hover: var(--primitive-teal-07);
+  --color-input-border-selected: var(--primitive-teal-06);
+  --color-input-border-disabled: var(--primitive-neutral-08);
+  --color-input-bg-primary: var(--primitive-neutral-10);
+  --color-input-bg-disabled: var(--primitive-neutral-09);
+
+  /* Core colours */
+  --color-core-ui-primary: var(--primitive-teal-05);
+  --color-core-ui-secondary: var(--primitive-teal-09);
+  --color-core-accent-coral: var(--primitive-red-07);
+  --color-core-accent-violet: var(--primitive-purple-07);
+  --color-core-accent-cobalt: var(--primitive-blue-07);
+  --color-core-accent-amber: var(--primitive-orange-07);
+  --color-core-accent-gold: var(--primitive-yellow-07);
+  --color-core-accent-mint: var(--primitive-green-07);
+  --color-trend-up: var(--primitive-green-07);
+  --color-trend-down: var(--primitive-red-07);
+}

package/tokens/tokens-light.css

@@ -0,0 +1,276 @@
+/* ============================================
+   SEMANTIC TOKENS — LIGHT THEME
+   These are what components use
+   Always reference these, never primitives
+   Every value chains to tokens-primitives.css
+   (validated by scripts/validate-token-references.mjs)
+   ============================================ */
+
+[data-theme="light"], :root {
+  /* Text */
+  --color-text-primary: var(--primitive-neutral-10);
+  --color-text-secondary: var(--primitive-neutral-07);
+  --color-text-tertiary: var(--primitive-neutral-06);
+  --color-text-inverse: var(--primitive-neutral-04);
+  --color-text-on-inverse: var(--primitive-neutral-01);
+
+  /* Icon */
+  --color-icon-primary: var(--primitive-neutral-06);
+  --color-icon-secondary: var(--primitive-neutral-04);
+
+  /* Background - Page */
+  --color-bg-page-primary: var(--primitive-neutral-01);
+  --color-bg-page-inverse: var(--primitive-neutral-10);
+
+  /* Background - Container */
+  --color-bg-container-primary: var(--primitive-neutral-00);
+  --color-bg-container-primary-transparent: var(--primitive-neutral-00-a01);
+  /* The semi surface rides the glass-strength white, not the 60% one: light
+     containers should read bright white, with the ambient background only
+     whispering through. */
+  --color-bg-container-primary-semi: var(--primitive-neutral-00-a90);
+  --color-bg-container-secondary: var(--primitive-neutral-01);
+  --color-bg-container-tertiary: var(--primitive-neutral-02);
+  --color-bg-container-inverse: var(--primitive-neutral-09);
+  --color-bg-container-border: var(--primitive-neutral-02);
+
+  /* Glass: the translucent floating-surface fill (chat panel, floating
+     sidebar). Deliberately translucent in both themes so the page's
+     colours reach the surface; pair it with backdrop-filter: blur(24px). */
+  --color-bg-glass: var(--primitive-neutral-00-a90);
+
+  /* Divider */
+  --color-divider: var(--primitive-neutral-02-a80);
+
+  /* Chat bubbles — sent (the person) and received (the agent). Both alias
+     the container-secondary / text-primary pair today; they exist as their
+     own roles so chat surfaces can be re-themed later without touching the
+     container ramp. */
+  --color-chat-bubble-sent-bg: var(--color-bg-container-secondary);
+  --color-chat-bubble-sent-text: var(--color-text-primary);
+  --color-chat-bubble-received-bg: var(--color-bg-container-secondary);
+  --color-chat-bubble-received-text: var(--color-text-primary);
+  /* The composer's context note — the quietest tint per theme, the nearest
+     neutral to each shell that still separates from it. Its own role, not a
+     container alias, because it deliberately sits off the container ramp. */
+  --color-chat-context-bg: var(--primitive-neutral-01);
+
+  /* Calendar surfaces — EventCalendar's day cells and event pills. Their own
+     roles (the chat-surfaces pattern) because the container ramp's dark steps
+     are too far apart for calendar density: cells rest one quiet step off the
+     calendar container and step one gentle notch away from the pill fill on
+     hover (lighter in dark, darker in light). A hovered cell keeps its hover
+     while the pointer is on a pill, so the pill hover aliases the resting
+     cell tint — always one step off the hovered cell — and the hover-only
+     border ring is an obvious mid-grey, so the pill under the pointer is
+     never in doubt while resting pills stay quiet. */
+  --color-calendar-cell-bg: var(--primitive-neutral-01);
+  --color-calendar-cell-bg-hover: var(--primitive-neutral-02-a80);
+  --color-calendar-event-bg: var(--color-bg-container-primary);
+  --color-calendar-event-bg-hover: var(--color-calendar-cell-bg);
+  --color-calendar-event-border: var(--primitive-neutral-04);
+
+  /* Overlay & controls */
+  --color-scrim: var(--primitive-true-black-semi);
+  /* The knob on an action-coloured track (ToggleSwitch, SelectionCard's
+     toggle). Chained to the on-action ink rather than a fixed neutral, so
+     every theme's AA-held action pairing keeps the thumb legible — a
+     light action fill (Smoke, Volt) gets a dark thumb automatically. */
+  --color-control-thumb: var(--color-action-primary-text);
+
+  /* Elevation — the only shadows in the system (floating surfaces + modals) */
+  --shadow-floating: 0 4px 16px rgba(0, 0, 0, 0.12);
+  --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.2);
+
+  /* Action - Primary. The action colour is theme-dependent: one teal step
+     cannot clear 3:1 against both a white page and a near-black one while
+     also carrying a 4.5:1 label, so light takes a deep fill under a light
+     label and the dark theme inverts it (see tokens-dark.css). */
+  --color-action-primary-bg: var(--primitive-teal-08);
+  --color-action-primary-bg-hover: var(--primitive-teal-09);
+  --color-action-primary-bg-active: var(--primitive-teal-10);
+  --color-action-primary-text: var(--primitive-teal-02);
+  --color-action-primary-text-active: var(--primitive-neutral-01);
+  --color-action-primary-text-secondary: var(--primitive-teal-10);
+  --color-action-primary-text-tertiary: var(--primitive-teal-09);
+  --color-action-primary-border: var(--primitive-teal-10);
+  --color-action-primary-border-secondary: var(--primitive-teal-08);
+  --color-action-primary-border-tertiary: var(--primitive-teal-08);
+
+  /* Action - Icon */
+  --color-action-icon-default: var(--primitive-neutral-10);
+  --color-action-icon-active: var(--primitive-teal-02);
+
+  /* Action - Passive (Secondary button) */
+  --color-action-passive-text: var(--primitive-neutral-10);
+  --color-action-passive-bg: var(--primitive-neutral-01-a01);
+  --color-action-passive-bg-hover: var(--primitive-neutral-02-a80);
+  --color-action-passive-bg-active: var(--primitive-neutral-03-a80);
+
+  /* Action - Neutral (grey filled buttons). Unlike passive, the fill is a
+     solid grey step that stays visible at rest — a filled button without
+     the action teal's "click here" weight. Hover and active deepen in
+     light mode and brighten in dark, like the primary family. */
+  --color-action-neutral-bg: var(--primitive-neutral-02);
+  --color-action-neutral-bg-hover: var(--primitive-neutral-03);
+  --color-action-neutral-bg-active: var(--primitive-neutral-04);
+  --color-action-neutral-text: var(--primitive-neutral-10);
+
+  /* Core colours */
+  --color-core-ui-primary: var(--primitive-teal-08);
+  --color-core-ui-secondary: var(--primitive-teal-10);
+  --color-core-accent-coral: var(--primitive-red-07);
+  --color-core-accent-violet: var(--primitive-purple-07);
+  --color-core-accent-cobalt: var(--primitive-blue-07);
+  --color-core-accent-amber: var(--primitive-orange-07);
+  --color-core-accent-gold: var(--primitive-yellow-07);
+  --color-core-accent-mint: var(--primitive-green-07);
+
+  /* Trend: the "number went up / went down" role (Stat deltas, table
+     movers). Theme-split for contrast: deep status inks on light
+     surfaces, the mint/coral accents on dark ones. */
+  --color-trend-up: var(--primitive-green-10);
+  --color-trend-down: var(--primitive-red-10);
+
+  /* Status - Positive */
+  --color-status-positive-bg: var(--primitive-green-01);
+  --color-status-positive-border: var(--primitive-green-07);
+  --color-status-positive-text: var(--primitive-green-10);
+  --color-status-positive-icon: var(--primitive-green-08);
+
+  /* Status - Warning */
+  --color-status-warning-bg: var(--primitive-orange-01);
+  --color-status-warning-border: var(--primitive-orange-07);
+  --color-status-warning-text: var(--primitive-orange-10);
+  --color-status-warning-icon: var(--primitive-orange-08);
+
+  /* Status - Error */
+  --color-status-error-bg: var(--primitive-red-01);
+  --color-status-error-border: var(--primitive-red-07);
+  --color-status-error-text: var(--primitive-red-10);
+  --color-status-error-icon: var(--primitive-red-08);
+
+  /* Status - Info */
+  --color-status-info-bg: var(--primitive-blue-01);
+  --color-status-info-border: var(--primitive-blue-07);
+  --color-status-info-text: var(--primitive-blue-10);
+  --color-status-info-icon: var(--primitive-blue-06);
+
+  /* Status - Neutral */
+  --color-status-neutral-bg: var(--primitive-neutral-02);
+  --color-status-neutral-border: var(--primitive-neutral-07);
+  --color-status-neutral-text: var(--primitive-neutral-08);
+  --color-status-neutral-icon: var(--primitive-neutral-06);
+
+  /* The -icon step is the status glyph colour for plain surfaces (a step
+     indicator, a tool-call state) — -text is tuned for the tinted status
+     bg and washes out on a bare container, especially in dark mode. */
+
+  /* AI - The gradient accent reserved for AI entry points and surfaces.
+     Red → blue → teal, so the AI affordance is its own signature and the
+     flat action teal keeps meaning "click here". Used as gradient stops
+     (AiButton's ring and glow), never as fills for ordinary chrome.
+     One luminous set, shared with dark: the deeper inks read as a heavy
+     dark border on white surfaces. */
+  --color-ai-gradient-start: var(--primitive-red-05);
+  --color-ai-gradient-mid: var(--primitive-blue-05);
+  --color-ai-gradient-end: var(--primitive-teal-07);
+  /* The AI button's solid field: pushed past the page floor in the theme's
+     own direction — bright white here, true black in dark — so the entry
+     point punches out of any surface instead of frosting into it. */
+  --color-ai-button-bg: var(--primitive-neutral-00);
+
+  /* Chart - Contribution heatmap ramp (level 0 = none → level 4 = most) */
+  --color-chart-contribution-0: var(--color-bg-container-primary);
+  --color-chart-contribution-1: var(--primitive-green-02);
+  --color-chart-contribution-2: var(--primitive-green-04);
+  --color-chart-contribution-3: var(--primitive-green-07);
+  --color-chart-contribution-4: var(--primitive-green-09);
+
+  /* Chart - Ordered series ramp for multi-series charts. Series 1 follows
+     the action teal (theme-split with it); 2-7 alias the core accents, so
+     re-theming an accent re-themes every chart that uses its slot. */
+  --color-chart-series-1: var(--color-action-primary-bg);
+  --color-chart-series-2: var(--color-core-accent-mint);
+  --color-chart-series-3: var(--color-core-accent-gold);
+  --color-chart-series-4: var(--color-core-accent-coral);
+  --color-chart-series-5: var(--color-core-accent-violet);
+  --color-chart-series-6: var(--color-core-accent-amber);
+  --color-chart-series-7: var(--color-core-accent-cobalt);
+
+  /* Input */
+  --color-input-text-primary: var(--primitive-neutral-10);
+  --color-input-text-placeholder: var(--primitive-neutral-06);
+  --color-input-text-disabled: var(--primitive-neutral-04);
+  --color-input-text-inverse: var(--primitive-neutral-04);
+  --color-input-border-primary: var(--primitive-neutral-02);
+  --color-input-border-hover: var(--primitive-teal-06);
+  --color-input-border-selected: var(--primitive-teal-08);
+  --color-input-border-disabled: var(--primitive-neutral-03);
+  --color-input-bg-primary: var(--primitive-neutral-00);
+  --color-input-bg-disabled: var(--primitive-neutral-02);
+
+  /* Spacing (from primitives) */
+  --radius-050: var(--primitive-radius-050);
+  --radius-100: var(--primitive-radius-100);
+  --radius-200: var(--primitive-radius-200);
+  --radius-300: var(--primitive-radius-300);
+  --radius-400: var(--primitive-radius-400);
+  --radius-600: var(--primitive-radius-600);
+  --radius-1200: var(--primitive-radius-1200);
+  --radius-pill: var(--primitive-radius-pill);
+
+  --padding-050: var(--primitive-padding-050);
+  --padding-100: var(--primitive-padding-100);
+  --padding-150: var(--primitive-padding-150);
+  --padding-200: var(--primitive-padding-200);
+  --padding-300: var(--primitive-padding-300);
+  --padding-400: var(--primitive-padding-400);
+  --padding-500: var(--primitive-padding-500);
+  --padding-1000: var(--primitive-padding-1000);
+
+  --border-025: var(--primitive-border-025);
+  --border-050: var(--primitive-border-050);
+
+  /* Icon size — theme-independent, so defined here only (like radius and
+     padding) rather than duplicated into tokens-dark.css. Components set
+     `--icon-size` to one of these; .material-symbols-rounded reads it for
+     font-size, box size, and optical size together. */
+  --icon-size-500: var(--primitive-icon-500);   /* 20px — compact controls */
+  --icon-size-600: var(--primitive-icon-600);   /* 24px — default */
+  --icon-size-800: var(--primitive-icon-800);   /* 32px — feature */
+  --icon-size-1200: var(--primitive-icon-1200);   /* 48px — marketing */
+
+  --gap-050: var(--primitive-gap-050);
+  --gap-100: var(--primitive-gap-100);
+  --gap-200: var(--primitive-gap-200);
+  --gap-300: var(--primitive-gap-300);
+  --gap-400: var(--primitive-gap-400);
+  --gap-500: var(--primitive-gap-500);
+  --gap-1000: var(--primitive-gap-1000);
+
+  /* Section rhythm — page-level spacing between major blocks. These are
+     the only spacing tokens with a responsive step (see the collapse
+     block at the bottom of this file). */
+  --gap-1500: var(--primitive-gap-1500);       /* 60px */
+  --gap-2000: var(--primitive-gap-2000);     /* 80px */
+  --gap-3000: var(--primitive-gap-3000);   /* 120px */
+  --padding-1500: var(--primitive-padding-1500); /* 60px */
+}
+
+/* ============================================
+   RESPONSIVE COLLAPSE
+   Section-rhythm spacing steps one notch down the primitive scale at
+   768px — the token layer's only breakpoint (typography collapses at the
+   same threshold in tokens-typography.css). Component-level spacing
+   (gap/padding xl and below) never steps.
+   ============================================ */
+
+@media (max-width: 768px) {
+  [data-theme="light"], :root {
+    --gap-1500: var(--primitive-gap-1000);        /* 60 → 40 */
+    --gap-2000: var(--primitive-gap-1500);      /* 80 → 60 */
+    --gap-3000: var(--primitive-gap-2000);    /* 120 → 80 */
+    --padding-1500: var(--primitive-padding-1000); /* 60 → 40 */
+  }
+}

package/tokens/tokens-motion.css

@@ -0,0 +1,72 @@
+/* ============================================
+   MOTION TOKENS
+   Durations and easing curves for transitions
+   and animations. Theme-agnostic (no light/dark
+   split) — defined once in :root, like typography.
+   ============================================ */
+
+:root {
+  /* ============================================
+     DURATIONS — CORE
+     The day-to-day scale. Most transitions use
+     base; fast is for hover feedback, slow for
+     structural changes, slower for page reveals.
+     ============================================ */
+
+  --motion-duration-fast: 150ms;     /* Quick feedback: hovers, icons, tooltips */
+  --motion-duration-base: 200ms;     /* Default for color/opacity/border transitions */
+  --motion-duration-slow: 300ms;     /* Structural: accordion, sidebar, toast enter */
+  --motion-duration-slower: 600ms;   /* Deliberate page-entrance reveals */
+
+  /* ============================================
+     DURATIONS — EXTENDED
+     Special-purpose timings; not part of the
+     day-to-day scale.
+     ============================================ */
+
+  --motion-duration-instant: 75ms;        /* Sub-threshold: takes the edge off a size change without reading as motion (Composer grow/shrink) */
+  --motion-duration-deliberate: 400ms;    /* Carousel slide */
+  --motion-duration-loop-spin: 1000ms;    /* Spinner rotation */
+  --motion-duration-loop-shimmer: 1800ms; /* Skeleton shimmer, agent label sweep */
+  --motion-duration-loop-matrix: 1400ms;  /* Agent dot-matrix cycle (twelve slots) */
+
+  /* ============================================
+     EASINGS
+     ============================================ */
+
+  --motion-ease-standard: ease;                                /* General default */
+  --motion-ease-emphasized: cubic-bezier(0.4, 0, 0.2, 1);      /* Size/layout changes */
+  --motion-ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);       /* Decelerate for enter animations */
+  --motion-ease-linear: linear;                                /* Continuous loops: spinner, progress */
+  --motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);     /* Playful overshoot: toggle thumb */
+}
+
+/* ============================================
+   REDUCED MOTION
+   Token collapse covers token-consuming CSS;
+   the universal guard covers components still
+   on hardcoded timings.
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --motion-duration-fast: 0.01ms;
+    --motion-duration-base: 0.01ms;
+    --motion-duration-slow: 0.01ms;
+    --motion-duration-slower: 0.01ms;
+    --motion-duration-instant: 0.01ms;
+    --motion-duration-deliberate: 0.01ms;
+    --motion-duration-loop-spin: 0.01ms;
+    --motion-duration-loop-shimmer: 0.01ms;
+    --motion-duration-loop-matrix: 0.01ms;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}