/* =====================================================================
   OSE design system · TIER 2 · SEMANTIC
   ---------------------------------------------------------------------
   Meaning, not values. Every token here maps to a primitive (--p-*);
   composites (font shorthands, focus ring) may also combine other semantic
   tokens. No raw values in this file.

   Surfaces
   - Default (:root) is cream. Re-map a subtree with
       data-surface="navy"  (or class .theme-dark)  navy bands, hero
       data-surface="night"                         footer, contact bar
       data-surface="cream" (or class .theme-light) back to cream inside navy
   - Custom properties inherit their COMPUTED value, so every token that
     depends on a re-mapped colour is declared again on each surface root
     (see the "all surfaces" block below and components.css).

   Annotations: "@group <name>" groups tokens for /styleguide/.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Colour: cream surface (default)
   --------------------------------------------------------------------- */
:root,
[data-surface="cream"],
.theme-light {
  /* @group Colour · Surface */
  --color-bg: var(--p-color-cream); /* page background */
  --color-bg-inverse: var(--p-color-navy); /* bands that flip the theme */
  --color-bg-deep: var(--p-color-night); /* footer, deepest bands */
  --color-surface: var(--p-color-cream-50); /* cards, fields, menus */
  --color-surface-hover: var(--p-color-navy-a06); /* hover wash over any surface */
  --color-surface-pressed: var(--p-color-navy-a10); /* pressed wash */
  --color-surface-glass: var(--p-color-cream-a85); /* sticky bars (with blur) */
  --color-overlay: var(--p-color-night-a64); /* modal scrim */
  --color-none: var(--p-color-transparent);

  /* @group Colour · Text */
  --color-text: var(--p-color-navy); /* all body text */
  --color-text-muted: var(--p-color-navy-70); /* secondary text only */
  --color-text-inverse: var(--p-color-cream); /* text on --color-bg-inverse */
  --color-text-on-accent: var(--p-color-navy); /* text on mint / lilac / peach fills */

  /* @group Colour · Border */
  --color-border: var(--p-color-navy-a14); /* decorative hairlines */
  --color-border-hover: var(--p-color-navy-a40); /* a hairline under the pointer: clickable cards */
  --color-border-strong: var(--p-color-navy-70); /* control boundaries (3:1+) */

  /* @group Colour · Accent */
  --color-accent: var(--p-color-lilac); /* small details: hover underline, indicators */
  --color-accent-alt: var(--p-color-mint);
  --color-accent-warm: var(--p-color-peach);
  --gradient-accent: var(--p-gradient-ring); /* the O-ring: one aurora detail per section */

  /* @group Colour · Action */
  --color-action: var(--p-color-navy); /* primary button fill */
  --color-action-hover: var(--p-color-night);
  --color-action-active: var(--p-color-night);
  --color-action-text: var(--p-color-cream);
  --color-action-subtle-hover: var(--p-color-navy-a06); /* outline / ghost hover */
  --color-action-subtle-active: var(--p-color-navy-a10);

  /* @group Colour · Focus */
  --color-focus: var(--p-color-lilac); /* 2px lilac ring (brand) */
  --color-focus-halo: var(--p-color-navy); /* 1px outer edge: lilac alone is 2:1 on cream */

  /* @group Colour · Feedback */
  --color-success: var(--p-color-pine);
  --color-success-surface: var(--p-color-mint-a32);
  --color-error: var(--p-color-brick);
  --color-error-surface: var(--p-color-peach-a32);
  --color-selected-surface: var(--p-color-mint-a32);
  --color-selection: var(--p-color-mint); /* ::selection */
  --color-selection-text: var(--p-color-navy);

  /* @group Colour · Disabled */
  --color-disabled-surface: var(--p-color-navy-a06);
  --color-disabled-text: var(--p-color-navy-a40);
  --color-disabled-border: var(--p-color-navy-a14);

  /* @group Colour · Planets */
  --color-planet-mercury: var(--p-color-mercury);
  --color-planet-venus: var(--p-color-venus);
  --color-planet-earth: var(--p-color-earth);
  --color-planet-mars: var(--p-color-mars);
  --color-planet-jupiter: var(--p-color-jupiter);
  --color-planet-saturn: var(--p-color-saturn);
  --color-planet-uranus: var(--p-color-uranus);
  --color-planet-neptune: var(--p-color-neptune);
  --color-planet-outline: var(--p-color-navy-a20); /* pale dots (Kim, Thổ, Thiên Vương) on cream */
  --color-planet-body: var(--p-color-navy); /* the big brand planet (navy disc); night on navy bands so it stays visible */

  /* @group Elevation */
  --shadow-none: var(--p-shadow-none);
  --shadow-raised: var(--p-shadow-1);
  --shadow-overlay: var(--p-shadow-2);
  --shadow-floating: var(--p-shadow-3);
}

/* ---------------------------------------------------------------------
   Colour: navy surface
   --------------------------------------------------------------------- */
[data-surface="navy"],
.theme-dark {
  --color-bg: var(--p-color-navy);
  --color-bg-inverse: var(--p-color-cream);
  --color-bg-deep: var(--p-color-night);
  --color-surface: var(--p-color-cream-a06);
  --color-surface-hover: var(--p-color-cream-a10);
  --color-surface-pressed: var(--p-color-cream-a20);
  --color-surface-glass: var(--p-color-navy-a85);
  --color-overlay: var(--p-color-night-a64);
  --color-none: var(--p-color-transparent);
  --color-text: var(--p-color-cream);
  --color-text-muted: var(--p-color-cream-70);
  --color-text-inverse: var(--p-color-navy);
  --color-text-on-accent: var(--p-color-navy);
  --color-border: var(--p-color-cream-a14);
  --color-border-hover: var(--p-color-cream-a40);
  --color-border-strong: var(--p-color-cream-70);
  --color-accent: var(--p-color-lilac);
  --color-accent-alt: var(--p-color-mint);
  --color-accent-warm: var(--p-color-peach);
  --gradient-accent: var(--p-gradient-ring);
  --color-action: var(--p-color-cream);
  --color-action-hover: var(--p-color-mint);
  --color-action-active: var(--p-color-ring-a);
  --color-action-text: var(--p-color-navy);
  --color-action-subtle-hover: var(--p-color-cream-a10);
  --color-action-subtle-active: var(--p-color-cream-a20);
  --color-focus: var(--p-color-lilac);
  --color-focus-halo: var(--p-color-navy);
  --color-success: var(--p-color-mint);
  --color-success-surface: var(--p-color-mint-a14);
  --color-error: var(--p-color-peach);
  --color-error-surface: var(--p-color-peach-a14);
  --color-selected-surface: var(--p-color-mint-a14);
  --color-selection: var(--p-color-mint);
  --color-selection-text: var(--p-color-navy);
  --color-disabled-surface: var(--p-color-cream-a06);
  --color-disabled-text: var(--p-color-cream-a40);
  --color-disabled-border: var(--p-color-cream-a14);
  --color-planet-mercury: var(--p-color-mercury);
  --color-planet-venus: var(--p-color-venus);
  --color-planet-earth: var(--p-color-earth);
  --color-planet-mars: var(--p-color-mars);
  --color-planet-jupiter: var(--p-color-jupiter);
  --color-planet-saturn: var(--p-color-saturn);
  --color-planet-uranus: var(--p-color-uranus);
  --color-planet-neptune: var(--p-color-neptune);
  --color-planet-outline: var(--p-color-transparent);
  --color-planet-body: var(--p-color-night);
  --shadow-none: var(--p-shadow-none);
  --shadow-raised: var(--p-shadow-1-deep);
  --shadow-overlay: var(--p-shadow-2-deep);
  --shadow-floating: var(--p-shadow-3-deep);
}

/* ---------------------------------------------------------------------
   Colour: night surface (footer, sticky contact bar, deepest bands)
   --------------------------------------------------------------------- */
[data-surface="night"] {
  --color-bg: var(--p-color-night);
  --color-bg-inverse: var(--p-color-cream);
  --color-bg-deep: var(--p-color-night);
  --color-surface: var(--p-color-cream-a06);
  --color-surface-hover: var(--p-color-cream-a10);
  --color-surface-pressed: var(--p-color-cream-a20);
  --color-surface-glass: var(--p-color-night-a90);
  --color-overlay: var(--p-color-night-a64);
  --color-none: var(--p-color-transparent);
  --color-text: var(--p-color-cream);
  --color-text-muted: var(--p-color-cream-70);
  --color-text-inverse: var(--p-color-navy);
  --color-text-on-accent: var(--p-color-navy);
  --color-border: var(--p-color-cream-a14);
  --color-border-hover: var(--p-color-cream-a40);
  --color-border-strong: var(--p-color-cream-70);
  --color-accent: var(--p-color-lilac);
  --color-accent-alt: var(--p-color-mint);
  --color-accent-warm: var(--p-color-peach);
  --gradient-accent: var(--p-gradient-ring);
  --color-action: var(--p-color-cream);
  --color-action-hover: var(--p-color-mint);
  --color-action-active: var(--p-color-ring-a);
  --color-action-text: var(--p-color-navy);
  --color-action-subtle-hover: var(--p-color-cream-a10);
  --color-action-subtle-active: var(--p-color-cream-a20);
  --color-focus: var(--p-color-lilac);
  --color-focus-halo: var(--p-color-night);
  --color-success: var(--p-color-mint);
  --color-success-surface: var(--p-color-mint-a14);
  --color-error: var(--p-color-peach);
  --color-error-surface: var(--p-color-peach-a14);
  --color-selected-surface: var(--p-color-mint-a14);
  --color-selection: var(--p-color-mint);
  --color-selection-text: var(--p-color-navy);
  --color-disabled-surface: var(--p-color-cream-a06);
  --color-disabled-text: var(--p-color-cream-a40);
  --color-disabled-border: var(--p-color-cream-a14);
  --color-planet-mercury: var(--p-color-mercury);
  --color-planet-venus: var(--p-color-venus);
  --color-planet-earth: var(--p-color-earth);
  --color-planet-mars: var(--p-color-mars);
  --color-planet-jupiter: var(--p-color-jupiter);
  --color-planet-saturn: var(--p-color-saturn);
  --color-planet-uranus: var(--p-color-uranus);
  --color-planet-neptune: var(--p-color-neptune);
  --color-planet-outline: var(--p-color-transparent);
  --color-planet-body: var(--p-color-navy);
  --shadow-none: var(--p-shadow-none);
  --shadow-raised: var(--p-shadow-1-deep);
  --shadow-overlay: var(--p-shadow-2-deep);
  --shadow-floating: var(--p-shadow-3-deep);
}

/* ---------------------------------------------------------------------
   Composites that depend on re-mapped colours: declared on every surface
   root so they recompute inside navy / night / cream subtrees.
   --------------------------------------------------------------------- */
:root,
[data-surface],
.theme-light,
.theme-dark {
  /* @group Focus */
  --shadow-focus: 0 0 0 var(--p-border-2) var(--color-bg), 0 0 0 var(--p-space-1) var(--color-focus), 0 0 0 calc(var(--p-space-1) + var(--p-border-1)) var(--color-focus-halo); /* gap · 2px lilac · 1px halo */
}

/* ---------------------------------------------------------------------
   Surface-independent tokens
   --------------------------------------------------------------------- */
:root {
  /* @group Colour · Starlight (navy and night bands only, so one value fits every surface) */
  --color-starlight: var(--p-color-cream-a85); /* starfield dots: cream, never pure white */

  /* @group Typography · Family & weight */
  --font-family-heading: var(--p-font-family-heading); /* display, H1, H2 at 700; H3 and titles at 600. One primitive, so John can swap it */
  --font-family-ui: var(--p-font-family-ui); /* buttons, labels, nav links, form labels, chips, tabs, badges, breadcrumb, pagination: 500 */
  --font-family-body: var(--p-font-family-body); /* body, lead, small: 400 only */
  --font-family-mono: var(--p-font-family-mono); /* data labels: dates, class sizes, step numbers. 500 only */
  --font-family-base: var(--p-font-family-body); /* the body family under its old name, so existing references still resolve; prefer --font-family-body */
  --weight-regular: var(--p-font-weight-400); /* body family */
  --weight-medium: var(--p-font-weight-500); /* UI medium: nav links, chips, tabs, form labels */
  --weight-strong: var(--p-font-weight-600); /* emphasis: b / strong in body text */
  --weight-ui: var(--p-font-weight-500); /* buttons, labels, badges: John set these to 500, separate from headings */
  --weight-subheading: var(--p-font-weight-600); /* H3 and titles */
  --weight-heading: var(--p-font-weight-700); /* display, H1, H2 */
  --weight-data: var(--p-font-weight-500); /* mono family: data labels */

  /* @group Typography · Display */
  --text-display-size: var(--p-font-size-6);
  --text-display-leading: var(--p-leading-tight);
  --text-display-weight: var(--weight-heading);
  --text-display-tracking: var(--p-tracking-tightest);
  --text-display-family: var(--font-family-heading);
  --text-display: var(--text-display-weight) var(--text-display-size) / var(--text-display-leading) var(--text-display-family);

  /* @group Typography · H1 */
  --text-h1-size: var(--p-font-size-4);
  --text-h1-leading: var(--p-leading-tight);
  --text-h1-weight: var(--weight-heading);
  --text-h1-tracking: var(--p-tracking-tighter);
  --text-h1-family: var(--font-family-heading);
  --text-h1: var(--text-h1-weight) var(--text-h1-size) / var(--text-h1-leading) var(--text-h1-family);

  /* @group Typography · H2 */
  --text-h2-size: var(--p-font-size-3);
  --text-h2-leading: var(--p-leading-tight);
  --text-h2-weight: var(--weight-heading);
  --text-h2-tracking: var(--p-tracking-snug);
  --text-h2-family: var(--font-family-heading);
  --text-h2: var(--text-h2-weight) var(--text-h2-size) / var(--text-h2-leading) var(--text-h2-family);

  /* @group Typography · H3 */
  --text-h3-size: var(--p-font-size-1);
  --text-h3-leading: var(--p-leading-snug);
  --text-h3-weight: var(--weight-subheading); /* 600: a step below the 700 headings so the hierarchy also reads by weight */
  --text-h3-tracking: var(--p-tracking-normal);
  --text-h3-family: var(--font-family-heading);
  --text-h3: var(--text-h3-weight) var(--text-h3-size) / var(--text-h3-leading) var(--text-h3-family);

  /* @group Typography · Lead */
  --text-lead-size: var(--p-font-size-1);
  --text-lead-leading: var(--p-leading-normal);
  --text-lead-weight: var(--weight-regular);
  --text-lead-tracking: var(--p-tracking-normal);
  --text-lead-family: var(--font-family-body);
  --text-lead: var(--text-lead-weight) var(--text-lead-size) / var(--text-lead-leading) var(--text-lead-family);

  /* @group Typography · Body */
  --text-body-size: var(--p-font-size-0);
  --text-body-leading: var(--p-leading-relaxed);
  --text-body-weight: var(--weight-regular);
  --text-body-tracking: var(--p-tracking-normal);
  --text-body-family: var(--font-family-body);
  --text-body: var(--text-body-weight) var(--text-body-size) / var(--text-body-leading) var(--text-body-family);

  /* @group Typography · Small */
  --text-small-size: var(--p-font-size-minus-1);
  --text-small-leading: var(--p-leading-normal);
  --text-small-weight: var(--weight-regular);
  --text-small-tracking: var(--p-tracking-normal);
  --text-small-family: var(--font-family-body);
  --text-small: var(--text-small-weight) var(--text-small-size) / var(--text-small-leading) var(--text-small-family);

  /* @group Typography · Label (UI family, uppercase) */
  --text-label-size: var(--p-font-size-minus-1);
  --text-label-leading: var(--p-leading-snug);
  --text-label-weight: var(--weight-ui);
  --text-label-tracking: var(--p-tracking-caps);
  --text-label-case: uppercase;
  --text-label-family: var(--font-family-ui);
  --text-label: var(--text-label-weight) var(--text-label-size) / var(--text-label-leading) var(--text-label-family);

  /* @group Typography · Title (card titles, large subheads) */
  --text-title-size: var(--p-font-size-2);
  --text-title-leading: var(--p-leading-snug);
  --text-title-weight: var(--weight-subheading);
  --text-title-tracking: var(--p-tracking-tight);
  --text-title-family: var(--font-family-heading);
  --text-title: var(--text-title-weight) var(--text-title-size) / var(--text-title-leading) var(--text-title-family);

  /* @group Typography · Stat (big figures: opening date, class size) */
  --text-stat-size: var(--p-font-size-5);
  --text-stat-leading: var(--p-leading-tight);
  --text-stat-weight: var(--weight-heading);
  --text-stat-tracking: var(--p-tracking-tighter);
  --text-stat-family: var(--font-family-heading);
  --text-stat: var(--text-stat-weight) var(--text-stat-size) / var(--text-stat-leading) var(--text-stat-family);

  /* @group Typography · Data (mono labels: dates, class sizes, step numbers, small facts) */
  --text-data-size: var(--p-font-size-minus-1);
  --text-data-leading: var(--p-leading-snug);
  --text-data-weight: var(--weight-data);
  --text-data-tracking: var(--p-tracking-wide);
  --text-data-family: var(--font-family-mono);
  --text-data: var(--text-data-weight) var(--text-data-size) / var(--text-data-leading) var(--text-data-family);

  /* @group Typography · Eyebrow (the data role in capitals: section labels, hero label, footer column headings, programme stage) */
  --text-eyebrow-size: var(--text-data-size);
  --text-eyebrow-leading: var(--text-data-leading); /* 1.3: room for stacked diacritics over capitals (Ữ Ể Ậ) */
  --text-eyebrow-weight: var(--text-data-weight);
  --text-eyebrow-tracking: var(--p-tracking-mono-caps);
  --text-eyebrow-case: uppercase;
  --text-eyebrow-family: var(--text-data-family);
  --text-eyebrow: var(--text-eyebrow-weight) var(--text-eyebrow-size) / var(--text-eyebrow-leading) var(--text-eyebrow-family);

  /* @group Typography · Decoration */
  --underline-offset: var(--p-underline-offset);

  /* @group Space · Section */
  --space-none: var(--p-space-0);
  --space-section: var(--p-space-fluid-section); /* 64px phone → 128px desktop */
  --space-section-tight: var(--p-space-fluid-section-tight); /* 48px → 80px */

  /* @group Space · Stack (vertical rhythm) */
  --space-stack-3xs: var(--p-space-1);
  --space-stack-2xs: var(--p-space-2);
  --space-stack-xs: var(--p-space-3);
  --space-stack-sm: var(--p-space-4);
  --space-stack-md: var(--p-space-6);
  --space-stack-lg: var(--p-space-8);
  --space-stack-xl: var(--p-space-12);
  --space-stack-2xl: var(--p-space-16);
  --space-stack-3xl: var(--p-space-20);
  --space-stack-4xl: var(--p-space-24);
  --space-stack-5xl: var(--p-space-32);

  /* @group Space · Inline (horizontal gaps) */
  --space-inline-3xs: var(--p-space-1);
  --space-inline-2xs: var(--p-space-2);
  --space-inline-xs: var(--p-space-3);
  --space-inline-sm: var(--p-space-4);
  --space-inline-md: var(--p-space-6);
  --space-inline-lg: var(--p-space-8);
  --space-inline-xl: var(--p-space-12);
  --space-inline-2xl: var(--p-space-16);

  /* @group Space · Inset (padding inside components) */
  --space-inset-2xs: var(--p-space-1);
  --space-inset-xs: var(--p-space-2);
  --space-inset-sm: var(--p-space-3);
  --space-inset-md: var(--p-space-4);
  --space-inset-lg: var(--p-space-6);
  --space-inset-xl: var(--p-space-8);
  --space-inset-2xl: var(--p-space-10);
  --space-inset-fluid: var(--p-space-fluid-inset); /* 24px → 40px */

  /* @group Layout */
  --layout-max: var(--p-container-lg); /* page content max width */
  --layout-wide: var(--p-container-xl);
  --layout-narrow: var(--p-container-md);
  --layout-measure: var(--p-container-measure); /* ~40rem: a headline and its lead */
  --layout-prose: var(--p-container-prose); /* ~68ch reading width */
  --layout-dialog: var(--p-container-sm);
  --layout-popover: var(--p-container-xs);
  --layout-card-min: var(--p-container-card-min);
  --layout-gutter: var(--p-space-fluid-gutter); /* 16px side gutter on phones */
  --layout-gap: var(--p-space-6);
  --layout-sticky-top: calc(var(--size-nav) + var(--size-chapter-nav)); /* ≥ 64em on the home page: the nav plus the sticky chapter bar; anchors and sticky parts stop below it */

  /* @group Breakpoints (read by JS) */
  --bp-sm: var(--p-bp-sm);
  --bp-md: var(--p-bp-md);
  --bp-lg: var(--p-bp-lg);
  --bp-xl: var(--p-bp-xl);

  /* @group Radius */
  --radius-none: var(--p-radius-none);
  --radius-label: var(--p-radius-xs); /* flat labels: badges, tags */
  --radius-indicator: var(--p-radius-sm); /* checkboxes, menu options */
  --radius-field: var(--p-radius-md); /* inputs, selects */
  --radius-card: var(--p-radius-md); /* brand card radius */
  --radius-panel: var(--p-radius-lg); /* modals, large media */
  --radius-control: var(--p-radius-pill); /* buttons are pills */
  --radius-pill: var(--p-radius-pill);
  --radius-round: var(--p-radius-round);

  /* @group Border width */
  --border-width-hairline: var(--p-border-1);
  --border-width-thick: var(--p-border-2);

  /* @group Z-index */
  --z-base: var(--p-z-0);
  --z-raised: var(--p-z-1);
  --z-above: var(--p-z-2); /* one step above raised: a scene's foreground over its own backdrop */
  --z-dropdown: var(--p-z-100);
  --z-sticky: var(--p-z-200);
  --z-header: var(--p-z-300);
  --z-overlay: var(--p-z-400);
  --z-modal: var(--p-z-500);
  --z-toast: var(--p-z-600);
  --z-skip-link: var(--p-z-900);

  /* @group Size · Controls */
  --size-tap-min: var(--p-size-tap); /* every tap target ≥ 44px */
  --size-control-xs: var(--p-size-control-xs);
  --size-control-sm: var(--p-size-control-sm);
  --size-control-md: var(--p-size-control-md);
  --size-control-field: var(--p-size-control-field);
  --size-control-lg: var(--p-size-control-lg);
  --size-icon-sm: var(--p-size-icon-sm);
  --size-icon-md: var(--p-size-icon-md);
  --size-icon-lg: var(--p-size-icon-lg);
  --size-dot: var(--p-size-dot);
  --size-badge: var(--p-size-badge);
  --size-textarea-min: var(--p-size-textarea-min);
  --size-dropdown-max: var(--p-size-dropdown-max);
  --size-accent-bar: var(--p-size-accent-bar);
  --size-accent-dash: var(--p-size-accent-dash);

  /* @group Size · Brand & chrome */
  --size-logo-mark: var(--p-size-logo-mark);
  --size-logo-lockup: var(--p-size-logo-lockup);
  --size-nav: var(--p-size-nav);
  --size-contact-bar: var(--p-size-contact-bar);
  --size-avatar: var(--p-size-avatar);
  --size-planet-d-sm: var(--p-size-planet-d-sm);
  --size-planet-d: var(--p-size-planet-d);
  --size-planet-d-lg: var(--p-size-planet-d-lg);
  --size-planet-sm: var(--p-size-planet-sm); /* planet disc, small (orbit-diagram centre) */
  --size-planet-md: var(--p-size-planet-md); /* planet disc, default */
  --size-planet-hero: var(--p-size-planet-hero); /* planet disc, home hero (fluid) */
  --size-planet-hero-compact: var(--p-size-planet-hero-compact); /* planet disc, home hero below 64em (above the headline) */
  --size-chapter-nav: var(--p-size-control-lg); /* height of the sticky chapter index bar under the nav (≥ 64em) */
  --size-screen: var(--p-size-screen);
  --size-cover-circle: var(--p-size-cover-circle); /* one screen tall (small viewport height) */
  --size-chapter-step: var(--p-size-screen-step); /* one scroll step of a sticky chapter (70 % of a screen) */
  --size-seat: var(--p-size-seat); /* classroom seating plan: one seat (fluid) */
  --size-star-sm: var(--p-size-star-sm); /* star radius, far layer */
  --size-star-md: var(--p-size-star-md); /* star radius, mid layer */
  --size-star-lg: var(--p-size-star-lg); /* star radius, near layer */
  --safe-area-bottom: var(--p-safe-area-bottom);

  /* @group Ratio */
  --ratio-wide: var(--p-ratio-wide);
  --ratio-photo: var(--p-ratio-photo);
  --ratio-square: var(--p-ratio-square);
  --ratio-portrait: var(--p-ratio-portrait);
  --ratio-ring-gap: var(--p-ratio-ring-gap);
  --ratio-twinkle: var(--p-ratio-twinkle); /* ambient twinkle: lowest opacity as a share of the resting opacity */
  --ratio-planet-mercury: var(--p-planet-scale-mercury);
  --ratio-planet-venus: var(--p-planet-scale-venus);
  --ratio-planet-earth: var(--p-planet-scale-earth);
  --ratio-planet-mars: var(--p-planet-scale-mars);
  --ratio-planet-jupiter: var(--p-planet-scale-jupiter);
  --ratio-planet-saturn: var(--p-planet-scale-saturn);
  --ratio-planet-uranus: var(--p-planet-scale-uranus);
  --ratio-planet-neptune: var(--p-planet-scale-neptune);
  --ratio-planet-row-length: var(--p-planet-row-length);

  /* @group Brand geometry (unitless: ring and O of the logo, orbit diagram) */
  --geometry-ring-rx: var(--p-geo-ring-rx); /* ring x radius ÷ planet radius */
  --geometry-ring-ry: var(--p-geo-ring-ry); /* ring y radius ÷ planet radius */
  --geometry-ring-stroke: var(--p-geo-ring-stroke); /* ring stroke ÷ planet radius */
  --geometry-logo-o-cx: var(--p-geo-logo-o-cx); /* O centre x ÷ logo image width */
  --geometry-logo-o-cy: var(--p-geo-logo-o-cy); /* O centre y ÷ logo image height */
  --geometry-logo-o-d: var(--p-geo-logo-o-d); /* O diameter ÷ logo image width */
  --geometry-orbit-1: var(--p-geo-orbit-1); /* inner orbit diameter ÷ diagram width */
  --geometry-orbit-2: var(--p-geo-orbit-2);
  --geometry-orbit-3: var(--p-geo-orbit-3);

  /* @group Opacity, scale, angle, count */
  --opacity-hidden: var(--p-opacity-0);
  --opacity-faint: var(--p-opacity-35); /* decoration far in the background */
  --opacity-disabled: var(--p-opacity-45);
  --opacity-soft: var(--p-opacity-65); /* decoration in the middle distance */
  --opacity-dim: var(--p-opacity-75); /* content that steps back but stays readable (secondary text on night keeps AA) */
  --opacity-visible: var(--p-opacity-100);
  --scale-none: var(--p-scale-none);
  --scale-pressed: var(--p-scale-pressed);
  --scale-enter: var(--p-scale-enter);
  --scale-appear: var(--p-scale-appear); /* a small mark growing in as it appears */
  --scale-ring-open: var(--p-scale-ring-open); /* a planet ring opened up into a 3D-looking tilt (scaleY) */
  --scale-approach: var(--p-scale-approach); /* an object growing as the camera nears it */
  --angle-none: var(--p-angle-none);
  --angle-flip: var(--p-angle-half);
  --angle-ring-tilt: var(--p-angle-ring-tilt);
  --lines-title: var(--p-lines-2);
  --lines-excerpt: var(--p-lines-3);
  --count-stars: var(--p-count-stars); /* starfield budget per band */
  --count-stars-small: var(--p-count-stars-small); /* starfield budget below --bp-md */

  /* @group Blur */
  --blur-soft: var(--p-blur-sm);
  --blur-glass: var(--p-blur-md);

  /* @group Motion · Duration */
  --motion-none: var(--p-duration-0);
  --motion-instant: var(--p-duration-instant); /* press feedback, stagger step */
  --motion-fast: var(--p-duration-fast); /* hover, colour changes */
  --motion-base: var(--p-duration-base); /* menus, toasts, accordions */
  --motion-slow: var(--p-duration-slow); /* section reveals, mobile menu */
  --motion-scene: var(--p-duration-scene); /* timed scene segments; Lenis wheel smoothing */
  --motion-stagger: var(--p-duration-instant);
  --motion-ambient: var(--p-duration-ambient); /* slow ambient loops (starfield twinkle), paused off screen */

  /* @group Motion · Easing */
  --ease-linear: var(--p-ease-linear);
  --ease-standard: var(--p-ease-standard);
  --ease-emphasized: var(--p-ease-emphasized);
  --ease-exit: var(--p-ease-exit);
  --ease-orbit: var(--p-ease-orbit);

  /* @group Motion · Countdown scene (unitless, read by JS) */
  --scene-countdown-fill: var(--p-scene-countdown-fill); /* scroll over which the countdown line fills ÷ viewport height */

  /* @group Motion · Learning path scene (read by JS) */
  --scene-path-transfer: var(--p-scene-path-transfer); /* share of one stage's scroll spent moving out to the next orbit */
  --scene-path-snap: var(--p-scene-path-snap); /* phones: viewport fraction where a small diagram's marker moves */
  --scene-path-sweep: var(--p-angle-path-sweep); /* the marker's whole journey, clockwise from 6 o'clock */

  /* @group Motion · Classroom scene (unitless, read by JS) */
  --scene-classroom-start: var(--p-scene-classroom-start); /* plan top's viewport fraction when the scene begins */
  --scene-classroom-end: var(--p-scene-classroom-end); /* … and when every seat is in (≥ --bp-md, scrubbed) */

  /* @group Motion · Through-ring scene (unitless, read by JS) */
  --scene-flight-length: var(--p-scene-flight-length); /* pinned scroll ÷ viewport height */
  --scene-flight-hold: var(--p-scene-flight-hold); /* share of the pin the copy stays fully readable */
  --scene-flight-copy-out: var(--p-scene-flight-copy-out); /* share of the pin by which the copy has left */
  --scene-flight-aim: var(--p-scene-flight-aim); /* share by which the camera points at the ring's gap */
  --scene-flight-night-from: var(--p-scene-flight-night-from); /* share where the night starts fading in … */
  --scene-flight-night-to: var(--p-scene-flight-night-to); /* … and where it is opaque */
  --scene-flight-fade: var(--p-scene-flight-fade); /* share from which the planet dissolves */
  --scene-flight-night-lead-small: var(--p-scene-flight-night-lead-small); /* phones: copy bottom's distance below the nav, ÷ viewport height, when the night starts */

  /* @group Motion · Distance */
  --motion-distance-xs: var(--p-space-1); /* 4px: arrow-icon nudge on hover */
  --motion-distance-sm: var(--p-space-2); /* 8px */
  --motion-distance-md: var(--p-space-6); /* 24px */
  --motion-distance-lg: var(--p-space-16); /* 64px */
  --motion-lift: var(--p-offset-lift); /* hover lift */

  /* @group Motion · Delay (reading and typing time: unchanged by reduced motion) */
  --delay-typeahead: var(--p-delay-typeahead); /* listbox type-ahead buffer */
  --delay-toast: var(--p-delay-toast); /* success toast auto-dismiss */

  /* @group Icons (use as mask-image; colour = currentColor) */
  --icon-chevron-down: var(--p-icon-chevron-down);
  --icon-chevron-right: var(--p-icon-chevron-right);
  --icon-check: var(--p-icon-check);
  --icon-plus: var(--p-icon-plus);
  --icon-minus: var(--p-icon-minus);
  --icon-close: var(--p-icon-close);
  --icon-arrow-right: var(--p-icon-arrow-right);
  --icon-phone: var(--p-icon-phone);
  --icon-chat: var(--p-icon-chat);
  --icon-edit: var(--p-icon-edit);
  --icon-menu: var(--p-icon-menu);
  --icon-messenger: var(--p-icon-messenger); /* Messenger channel; Zalo uses --icon-chat */
  --icon-check-circle: var(--p-icon-check-circle); /* success feedback */
  --icon-alert-circle: var(--p-icon-alert-circle); /* error feedback */
}

/* ---------------------------------------------------------------------
   Reduced motion: no travel, no scale, scenes collapse to short fades.
   Opacity fades keep their durations.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-distance-xs: var(--p-space-0);
    --motion-distance-sm: var(--p-space-0);
    --motion-distance-md: var(--p-space-0);
    --motion-distance-lg: var(--p-space-0);
    --motion-lift: var(--p-space-0);
    --scale-pressed: var(--p-scale-none);
    --scale-enter: var(--p-scale-none);
    --motion-slow: var(--p-duration-base);
    --motion-scene: var(--p-duration-base);
    --motion-stagger: var(--p-duration-0);
  }
}