/* =====================================================================
   OSE design system · TIER 3 · COMPONENT TOKENS
   ---------------------------------------------------------------------
   One block per component. Values reference SEMANTIC tokens only (or
   another token of the same component). Never a --p-* primitive, never a
   raw value. styles/components/*.css may use only the tokens below.

   Declared on every surface root (not just :root) so each component
   re-resolves its colours inside data-surface="navy" / "night" / "cream".

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

:root,
[data-surface],
.theme-light,
.theme-dark {
  /* @component Focus ring (shared) */
  --focus-ring: var(--shadow-focus); /* 2px gap · 2px lilac · 1px halo */
  --focus-ring-color: var(--color-focus);
  --focus-ring-halo: var(--color-focus-halo);
  --focus-ring-width: var(--border-width-thick);
  --focus-ring-offset: var(--border-width-thick);

  /* @component Button */
  --btn-font-family: var(--font-family-ui); /* UI family at 600: independent of the heading family */
  --btn-font-weight: var(--weight-ui); /* 500 (John), independent of headings */
  --btn-leading: var(--text-display-leading);
  --btn-tracking: var(--text-body-tracking);
  --btn-radius: var(--radius-control);
  --btn-border-width: var(--border-width-hairline);
  --btn-gap: var(--space-inline-2xs);
  --btn-icon-size: var(--size-icon-md);
  --btn-duration: var(--motion-fast);
  --btn-ease: var(--ease-standard); /* press feedback is colour only (no scale) */
  --btn-focus-ring: var(--focus-ring);
  --btn-sm-height: var(--size-control-sm);
  --btn-sm-padding-inline: var(--space-inset-md); /* 16px */
  --btn-sm-font-size: var(--text-small-size);
  --btn-md-height: var(--size-control-md);
  --btn-md-padding-inline: calc(var(--space-inset-md) + var(--space-inset-2xs)); /* 20px */
  --btn-md-font-size: var(--text-body-size);
  --btn-lg-height: var(--size-control-lg);
  --btn-lg-padding-inline: var(--space-inset-lg); /* 24px */
  --btn-lg-font-size: var(--text-body-size); /* large = taller, not louder: same text size as md */
  --btn-padding-block: var(--space-inset-2xs); /* only matters when a label wraps */
  --btn-icon-nudge: var(--motion-distance-xs); /* trailing arrow on hover */
  --btn-arrow-icon: var(--icon-arrow-right);
  --btn-phone-icon: var(--icon-phone);
  --btn-chat-icon: var(--icon-chat);
  --btn-check-icon: var(--icon-check);
  --btn-plus-icon: var(--icon-plus);
  --btn-close-icon: var(--icon-close);

  /* @component Button · primary */
  --btn-primary-bg: var(--color-action);
  --btn-primary-text: var(--color-action-text);
  --btn-primary-border: var(--color-action);
  --btn-primary-bg-hover: var(--color-action-hover);
  --btn-primary-text-hover: var(--color-action-text);
  --btn-primary-border-hover: var(--color-action-hover);
  --btn-primary-bg-active: var(--color-action-active);
  --btn-primary-text-active: var(--color-action-text);
  --btn-primary-border-active: var(--color-action-active);
  --btn-primary-bg-focus: var(--color-action);
  --btn-primary-text-focus: var(--color-action-text);
  --btn-primary-border-focus: var(--color-action);
  --btn-primary-bg-disabled: var(--color-disabled-surface);
  --btn-primary-text-disabled: var(--color-disabled-text);
  --btn-primary-border-disabled: var(--color-disabled-border);

  /* @component Button · secondary (outline) */
  --btn-secondary-bg: var(--color-none);
  --btn-secondary-text: var(--color-text);
  --btn-secondary-border: var(--color-border-strong); /* hairline outline; darkens to the text colour on hover, focus and press */
  --btn-secondary-bg-hover: var(--color-action-subtle-hover);
  --btn-secondary-text-hover: var(--color-text);
  --btn-secondary-border-hover: var(--color-text);
  --btn-secondary-bg-active: var(--color-action-subtle-active);
  --btn-secondary-text-active: var(--color-text);
  --btn-secondary-border-active: var(--color-text);
  --btn-secondary-bg-focus: var(--color-none);
  --btn-secondary-text-focus: var(--color-text);
  --btn-secondary-border-focus: var(--color-text);
  --btn-secondary-bg-disabled: var(--color-none);
  --btn-secondary-text-disabled: var(--color-disabled-text);
  --btn-secondary-border-disabled: var(--color-disabled-border);

  /* @component Button · ghost */
  --btn-ghost-bg: var(--color-none);
  --btn-ghost-text: var(--color-text);
  --btn-ghost-border: var(--color-none);
  --btn-ghost-bg-hover: var(--color-action-subtle-hover);
  --btn-ghost-text-hover: var(--color-text);
  --btn-ghost-border-hover: var(--color-none);
  --btn-ghost-bg-active: var(--color-action-subtle-active);
  --btn-ghost-text-active: var(--color-text);
  --btn-ghost-border-active: var(--color-none);
  --btn-ghost-bg-focus: var(--color-none);
  --btn-ghost-text-focus: var(--color-text);
  --btn-ghost-border-focus: var(--color-none);
  --btn-ghost-bg-disabled: var(--color-none);
  --btn-ghost-text-disabled: var(--color-disabled-text);
  --btn-ghost-border-disabled: var(--color-none);

  /* @component Link */
  --link-text: var(--color-text);
  --link-text-hover: var(--color-text);
  --link-text-active: var(--color-text-muted);
  --link-text-visited: var(--color-text);
  --link-underline: var(--color-border-strong);
  --link-underline-hover: var(--color-accent);
  --link-underline-thickness: var(--border-width-hairline);
  --link-underline-thickness-hover: var(--border-width-thick);
  --link-underline-offset: var(--underline-offset);
  --link-duration: var(--motion-fast);
  --link-ease: var(--ease-standard);
  --link-focus-ring: var(--focus-ring);
  --link-radius: var(--radius-indicator);
  --link-underline-visited: var(--color-border-strong);
  --link-underline-active: var(--color-accent);
  --link-arrow-font-weight: var(--weight-medium);
  --link-arrow-font-family: var(--font-family-ui); /* standalone arrow links are UI; inline links keep the text family */
  --link-arrow-min-height: var(--size-tap-min);
  --link-arrow-gap: var(--space-inline-2xs);
  --link-arrow-underline: var(--color-none); /* standalone: underline only on hover */
  --link-arrow-icon: var(--icon-arrow-right);
  --link-arrow-icon-size: var(--size-icon-md);
  --link-arrow-nudge: var(--motion-distance-xs);

  /* @component Form field (label, help, error) */
  --field-gap: var(--space-stack-2xs);
  --field-label-font-size: var(--text-small-size);
  --field-label-font-weight: var(--weight-medium);
  --field-label-font-family: var(--font-family-ui);
  --field-label-leading: var(--text-small-leading);
  --field-label-color: var(--color-text);
  --field-required-color: var(--color-error);
  --field-help-font-size: var(--text-small-size);
  --field-help-color: var(--color-text-muted);
  --field-error-font-size: var(--text-small-size);
  --field-error-color: var(--color-error);
  --field-error-icon-size: var(--size-icon-sm);
  --field-error-icon: var(--icon-alert-circle);
  --field-error-gap: var(--space-inline-2xs);
  --field-error-leading: var(--text-small-leading);
  --field-help-leading: var(--text-small-leading);
  --field-required-gap: var(--space-inline-3xs);
  --field-optional-font-weight: var(--weight-regular);
  --field-optional-font-family: var(--font-family-body); /* "(không bắt buộc)" inside a label: body family, so 400 exists */
  --field-label-color-disabled: var(--color-disabled-text);
  --field-help-color-disabled: var(--color-disabled-text);
  --field-options-gap: var(--space-stack-3xs); /* between stacked .check rows (each already 44px) */
  --field-options-gap-inline: var(--space-inline-lg); /* between inline radios */

  /* @component Input & textarea */
  --input-height: var(--size-control-field);
  --input-padding-inline: var(--space-inset-md);
  --input-padding-block: var(--space-inset-sm);
  --input-font-size: var(--text-body-size); /* ≥16px: no iOS zoom on focus */
  --input-leading: var(--text-body-leading);
  --input-radius: var(--radius-field);
  --input-border-width: var(--border-width-hairline);
  --input-bg: var(--color-surface);
  --input-text: var(--color-text);
  --input-border: var(--color-border-strong);
  --input-placeholder: var(--color-text-muted);
  --input-bg-hover: var(--color-surface);
  --input-border-hover: var(--color-text);
  --input-bg-focus: var(--color-surface);
  --input-border-focus: var(--color-text);
  --input-focus-ring: var(--focus-ring);
  --input-bg-error: var(--color-surface);
  --input-border-error: var(--color-error);
  --input-bg-disabled: var(--color-disabled-surface);
  --input-text-disabled: var(--color-disabled-text);
  --input-border-disabled: var(--color-disabled-border);
  --input-duration: var(--motion-fast);
  --input-ease: var(--ease-standard);
  --input-opacity: var(--opacity-visible); /* undoes UA dimming of placeholder / disabled text (Firefox, Safari) */
  --input-bg-readonly: var(--color-none);
  --input-border-readonly: var(--color-border-strong); /* drawn dashed */
  --textarea-min-height: var(--size-textarea-min);

  /* @component Select & dropdown */
  --select-chevron-icon: var(--icon-chevron-down);
  --select-chevron-size: var(--size-icon-md);
  --select-chevron-color: var(--color-text);
  --select-chevron-color-disabled: var(--color-disabled-text);
  --select-padding-inline-end: var(--size-control-sm);
  --select-chevron-rotate-open: var(--angle-flip);
  --select-chevron-duration: var(--motion-base);
  --select-chevron-ease: var(--ease-standard);
  --select-option-bg: var(--color-bg); /* native option list (Windows, Android): opaque on every surface */
  --select-option-text: var(--color-text);
  --dropdown-bg: var(--color-surface);
  --dropdown-bg-base: var(--color-bg); /* opaque layer under --dropdown-bg, which is translucent on navy */
  --dropdown-placeholder: var(--color-text-muted);
  --dropdown-text: var(--color-text);
  --dropdown-border: var(--color-border);
  --dropdown-border-width: var(--border-width-hairline);
  --dropdown-radius: var(--radius-field);
  --dropdown-shadow: var(--shadow-overlay);
  --dropdown-padding: var(--space-inset-2xs);
  --dropdown-offset: var(--space-stack-2xs);
  --dropdown-max-height: var(--size-dropdown-max);
  --dropdown-z: var(--z-dropdown);
  --dropdown-option-height: var(--size-tap-min);
  --dropdown-option-padding-inline: var(--space-inset-sm);
  --dropdown-option-radius: var(--radius-indicator);
  --dropdown-option-bg-hover: var(--color-surface-hover);
  --dropdown-option-bg-active: var(--color-surface-pressed);
  --dropdown-option-bg-selected: var(--color-selected-surface);
  --dropdown-option-text-selected: var(--color-text);
  --dropdown-option-check-icon: var(--icon-check);
  --dropdown-option-check-color: var(--color-text);
  --dropdown-option-text-disabled: var(--color-disabled-text);
  --dropdown-enter-duration: var(--motion-base);
  --dropdown-enter-ease: var(--ease-emphasized);
  --dropdown-exit-duration: var(--motion-fast);
  --dropdown-exit-ease: var(--ease-exit);
  --dropdown-enter-offset: var(--motion-distance-sm);
  --dropdown-option-gap: var(--space-inline-xs);
  --dropdown-option-padding-block: var(--space-inset-xs);
  --dropdown-option-font-size: var(--text-body-size);
  --dropdown-option-weight-selected: var(--weight-medium);
  --dropdown-option-font-family-selected: var(--font-family-ui); /* options are body text; the selected one switches to the UI family so its weight exists */
  --dropdown-option-bg-disabled: var(--color-none);
  --dropdown-option-check-size: var(--size-icon-md);
  --dropdown-option-focus-width: var(--border-width-thick); /* forced-colors outline */
  --dropdown-option-focus-ring: inset 0 0 0 var(--border-width-hairline) var(--color-focus-halo), inset 0 0 0 calc(var(--border-width-hairline) + var(--border-width-thick)) var(--color-focus); /* aria-activedescendant: 1px halo + 2px lilac, inset */
  --dropdown-option-duration: var(--motion-fast);
  --dropdown-option-ease: var(--ease-standard);
  --dropdown-typeahead-delay: var(--delay-typeahead);

  /* @component Checkbox & radio */
  --check-size: var(--size-icon-lg);
  --check-row-min-height: var(--size-tap-min);
  --check-gap: var(--space-inline-xs);
  --check-radius: var(--radius-indicator);
  --check-border-width: var(--border-width-thick);
  --check-bg: var(--color-surface);
  --check-border: var(--color-border-strong);
  --check-bg-hover: var(--color-surface);
  --check-border-hover: var(--color-text);
  --check-bg-checked: var(--color-action);
  --check-border-checked: var(--color-action);
  --check-bg-checked-hover: var(--color-action-hover);
  --check-mark-icon: var(--icon-check);
  --check-mark-color: var(--color-action-text);
  --check-mark-size: var(--size-icon-md);
  --check-border-error: var(--color-error);
  --check-bg-disabled: var(--color-disabled-surface);
  --check-border-disabled: var(--color-disabled-border);
  --check-mark-color-disabled: var(--color-disabled-text);
  --check-label-color-disabled: var(--color-disabled-text);
  --check-focus-ring: var(--focus-ring);
  --check-duration: var(--motion-fast);
  --check-ease: var(--ease-standard);
  --radio-radius: var(--radius-round);
  --radio-dot-size: var(--size-dot);
  --radio-dot-color: var(--color-action-text);
  --check-label-font-size: var(--text-body-size);
  --check-label-leading: var(--text-body-leading);
  --check-label-color: var(--color-text);
  --check-border-checked-hover: var(--color-action-hover);
  --check-bg-error: var(--color-error-surface);
  --check-indeterminate-icon: var(--icon-minus);
  --check-mark-enter-scale: var(--scale-enter);
  --check-press-scale: var(--scale-pressed);

  /* @component Card (base) */
  --card-bg: var(--color-none); /* no fill: the hairline is the card */
  --card-text: var(--color-text);
  --card-text-muted: var(--color-text-muted);
  --card-border: var(--color-border);
  --card-border-width: var(--border-width-hairline);
  --card-radius: var(--radius-card);
  --card-padding: var(--space-inset-lg);
  --card-gap: var(--space-stack-sm);
  --card-shadow: var(--shadow-none); /* never raised: no shadow at rest, on hover or pressed */
  --card-border-hover: var(--color-border-hover); /* the only hover feedback: the hairline darkens a little */
  --card-duration: var(--motion-fast);
  --card-ease: var(--ease-standard);
  --card-focus-ring: var(--focus-ring);
  --card-title-font: var(--text-h3);
  --card-title-tracking: var(--text-h3-tracking);
  --card-media-ratio: var(--ratio-photo);
  --card-media-bg: var(--color-surface-hover);
  --card-meta-font: var(--text-data); /* dates, places, class facts: data labels */
  --card-meta-tracking: var(--text-data-tracking);
  --card-border-active: var(--color-border-strong);
  --card-opacity-disabled: var(--opacity-disabled);

  /* @component Card · course */
  --course-card-label-color: var(--color-text-muted);
  --course-card-meta-color: var(--color-text-muted);
  --course-card-meta-font-size: var(--text-small-size);
  --course-card-meta-font-family: var(--font-family-mono); /* class size, sessions, minutes: data labels */
  --course-card-meta-font-weight: var(--weight-data);
  --course-card-meta-gap: var(--space-inline-2xs);
  --course-card-cta-color: var(--color-text);
  --course-card-cta-icon: var(--icon-arrow-right);
  --course-card-label-font: var(--text-eyebrow); /* "Chặng 1": the stage, as a mono data label */
  --course-card-label-tracking: var(--text-eyebrow-tracking);
  --course-card-label-case: var(--text-eyebrow-case);
  --course-card-note-color: var(--color-text); /* "Liên hệ để nhận học phí" */
  --course-card-note-font-size: var(--text-small-size);
  --course-card-note-font-weight: var(--weight-medium);
  --course-card-note-font-family: var(--font-family-ui);
  --course-card-cta-font-weight: var(--weight-ui);
  --course-card-cta-font-family: var(--font-family-ui);
  --course-card-cta-gap: var(--space-inline-2xs);
  --course-card-cta-icon-size: var(--size-icon-md);
  --course-card-cta-shift: var(--motion-distance-sm); /* arrow nudge on hover / focus */
  --course-card-duration: var(--motion-fast);
  --course-card-ease: var(--ease-standard);

  /* @component Card · blog */
  --blog-card-media-ratio: var(--ratio-wide);
  --blog-card-date-color: var(--color-text-muted);
  --blog-card-date-font: var(--text-data); /* dates are data labels: mono */
  --blog-card-date-tracking: var(--text-data-tracking);
  --blog-card-excerpt-color: var(--color-text-muted);
  --blog-card-excerpt-lines: var(--lines-excerpt);
  --blog-card-title-lines: var(--lines-title);
  --blog-card-meta-gap: var(--space-inline-xs);
  --blog-card-badge-height: var(--size-badge);
  --blog-card-badge-padding-inline: var(--space-inset-xs);
  --blog-card-badge-radius: var(--radius-label); /* flat label, like .badge */
  --blog-card-draft-bg: var(--color-accent-warm); /* "NHÁP" until John approves the post */
  --blog-card-draft-text: var(--color-text-on-accent);
  --blog-card-draft-font: var(--text-label);
  --blog-card-draft-tracking: var(--text-label-tracking);
  --blog-card-draft-case: var(--text-label-case);
  --blog-card-flag-bg: var(--color-surface-glass); /* "Ảnh minh hoạ" tag on mockup covers */
  --blog-card-flag-text: var(--color-text);
  --blog-card-flag-font-size: var(--text-small-size);
  --blog-card-flag-font-weight: var(--weight-medium);
  --blog-card-flag-font-family: var(--font-family-ui);
  --blog-card-flag-offset: var(--space-inset-sm);

  /* @component Card · teacher */
  --teacher-card-bg: var(--color-none); /* not clickable, so not a box: a hairline above, no border, no fill */
  --teacher-card-radius: var(--radius-none);
  --teacher-card-rule: var(--color-border);
  --teacher-card-rule-width: var(--border-width-hairline);
  --teacher-card-padding-block-start: var(--space-inset-lg); /* below the rule */
  --teacher-card-avatar-size: var(--size-avatar);
  --teacher-card-avatar-radius: var(--radius-round);
  --teacher-card-avatar-bg: var(--color-bg-deep); /* navy disc on every surface: the cream O placeholder stays visible */
  --teacher-card-avatar-ring: var(--color-border); /* hairline rim (like the planet's): invisible on cream, defines the disc on navy */
  --teacher-card-avatar-ring-width: var(--border-width-hairline);
  --teacher-card-name-font: var(--text-h3);
  --teacher-card-role-color: var(--color-text-muted);
  --teacher-card-role-font-size: var(--text-small-size);
  --teacher-card-gap: var(--space-stack-xs);
  --teacher-card-name-tracking: var(--text-h3-tracking);
  --teacher-card-name-gap: var(--space-stack-3xs); /* name → role */
  --teacher-card-qualification-font-size: var(--text-small-size);
  --teacher-card-divider: var(--color-border);
  --teacher-card-divider-width: var(--border-width-hairline);
  --teacher-card-row-gap: var(--space-inline-md);

  /* @component Badge */
  --badge-height: var(--size-badge);
  --badge-padding-inline: var(--space-inset-xs);
  --badge-radius: var(--radius-label); /* flat label, not a pill */
  --badge-font-size: var(--text-label-size);
  --badge-font-weight: var(--text-label-weight);
  --badge-font-family: var(--text-label-family);
  --badge-tracking: var(--text-label-tracking);
  --badge-bg: var(--color-none); /* default: hairline outline in the text colour */
  --badge-text: var(--color-text);
  --badge-outline: var(--color-border-strong);
  --badge-navy-bg: var(--color-bg-inverse); /* .badge--navy: the solid label (cream on navy surfaces) */
  --badge-navy-text: var(--color-text-inverse);
  --badge-data-font-family: var(--text-eyebrow-family); /* .badge--data: dates and counts in the mono eyebrow role */
  --badge-data-font-weight: var(--text-eyebrow-weight);
  --badge-data-tracking: var(--text-eyebrow-tracking);
  --badge-mint-bg: var(--color-accent-alt);
  --badge-lilac-bg: var(--color-accent);
  --badge-peach-bg: var(--color-accent-warm);
  --badge-accent-text: var(--color-text-on-accent);
  --badge-neutral-bg: var(--color-surface-hover);
  --badge-neutral-text: var(--color-text);
  --badge-leading: var(--text-label-leading);
  --badge-case: var(--text-label-case);
  --badge-border-width: var(--border-width-hairline);
  --badge-border: var(--color-none); /* filled variants: invisible; becomes the outline in forced-colors mode */

  /* @component Chip (interactive filter) */
  --chip-height: var(--size-control-xs); /* hit area padded to --chip-hit-area */
  --chip-hit-area: var(--size-tap-min);
  --chip-padding-inline: var(--space-inset-sm);
  --chip-radius: var(--radius-pill);
  --chip-font-size: var(--text-small-size);
  --chip-font-weight: var(--weight-medium);
  --chip-font-family: var(--font-family-ui);
  --chip-border-width: var(--border-width-hairline);
  --chip-bg: var(--color-none); /* flat: hairline outline only until selected */
  --chip-text: var(--color-text);
  --chip-border: var(--color-border-strong);
  --chip-bg-hover: var(--color-surface-hover);
  --chip-border-hover: var(--color-text);
  --chip-bg-selected: var(--color-action);
  --chip-text-selected: var(--color-action-text);
  --chip-border-selected: var(--color-action);
  --chip-bg-disabled: var(--color-disabled-surface);
  --chip-text-disabled: var(--color-disabled-text);
  --chip-border-disabled: var(--color-disabled-border);
  --chip-focus-ring: var(--focus-ring);
  --chip-duration: var(--motion-fast);
  --chip-ease: var(--ease-standard);
  --chip-leading: var(--text-small-leading);
  --chip-gap: var(--space-inline-2xs); /* ≥ hit-area overhang, so padded hit areas never overlap */
  --chip-bg-active: var(--color-surface-pressed); /* press feedback is colour only (no scale) */
  --chip-bg-selected-hover: var(--color-action-hover);
  --chip-border-selected-hover: var(--color-action-hover);
  --chip-bg-selected-active: var(--color-action-active);

  /* @component Tag (static topic label) */
  --tag-padding-inline: var(--space-inset-xs);
  --tag-padding-block: var(--space-inset-2xs);
  --tag-radius: var(--radius-label); /* flat label */
  --tag-font-size: var(--text-small-size);
  --tag-font-weight: var(--weight-medium);
  --tag-font-family: var(--font-family-ui);
  --tag-bg: var(--color-none);
  --tag-text: var(--color-text-muted);
  --tag-border: var(--color-border);
  --tag-border-width: var(--border-width-hairline);
  --tag-dot-size: var(--size-planet-d-sm);
  --tag-leading: var(--text-small-leading);
  --tag-gap: var(--space-inline-2xs);
  --tag-dot: var(--color-text-muted); /* plain dot; a planet modifier swaps it */
  --tag-dot-radius: var(--radius-round);
  --tag-dot-outline: var(--color-planet-outline); /* pale dots (Kim, Thổ, Thiên Vương) on cream */
  --tag-dot-outline-none: var(--color-none);
  --tag-dot-outline-width: var(--border-width-hairline);
  --tag-dot-mercury: var(--color-planet-mercury);
  --tag-dot-venus: var(--color-planet-venus);
  --tag-dot-earth: var(--color-planet-earth);
  --tag-dot-mars: var(--color-planet-mars);
  --tag-dot-jupiter: var(--color-planet-jupiter);
  --tag-dot-saturn: var(--color-planet-saturn);
  --tag-dot-uranus: var(--color-planet-uranus);
  --tag-dot-neptune: var(--color-planet-neptune);

  /* @component Nav bar */
  --nav-height: var(--size-nav);
  --nav-padding-inline: var(--layout-gutter);
  --nav-max-width: var(--layout-max);
  --nav-bg: var(--color-surface-glass);
  --nav-blur: var(--blur-glass);
  --nav-border: var(--color-border);
  --nav-border-width: var(--border-width-hairline); /* scrolled: a hairline, no shadow */
  --nav-sticky-offset: var(--space-none);
  --nav-z: var(--z-header);
  --nav-logo-height: var(--size-logo-mark);
  --nav-link-gap: var(--space-inline-lg);
  --nav-link-min-height: var(--size-tap-min);
  --nav-link-font-size: var(--text-small-size);
  --nav-link-font-weight: var(--weight-medium);
  --nav-link-font-family: var(--font-family-ui);
  --nav-link-text: var(--color-text);
  --nav-link-text-hover: var(--color-text);
  --nav-link-underline-hover: var(--color-accent);
  --nav-link-indicator-current: var(--color-text); /* solid: the aurora stays on the planet's ring */
  --nav-link-indicator-height: var(--border-width-thick);
  --nav-duration: var(--motion-base);
  --nav-ease: var(--ease-standard);
  --nav-focus-ring: var(--focus-ring);
  --nav-text: var(--color-text);
  --nav-bg-overlay: var(--color-none); /* .nav--overlay before scrolling: transparent over a navy hero */
  --nav-border-rest: var(--color-none); /* the hairline appears only once scrolled */
  --nav-gap: var(--space-inline-md); /* between logo, links and actions */
  --nav-actions-gap: var(--space-inline-xs);
  --nav-menu-padding: var(--space-inset-xs); /* no-JS phone link row: room for focus rings */
  --nav-link-gap-sm: var(--space-inline-xs); /* no-JS phone link row */
  --nav-link-min-width: var(--size-tap-min);
  --nav-link-padding-inline: var(--space-inset-2xs);
  --nav-link-radius: var(--radius-indicator);
  --nav-link-text-active: var(--color-text-muted);
  --nav-link-indicator-inset: var(--space-inset-xs); /* indicator distance above the link's bottom edge */
  --nav-link-indicator-radius: var(--radius-pill);

  /* @component Mobile menu */
  --mobile-menu-bg: var(--color-bg);
  --mobile-menu-text: var(--color-text);
  --mobile-menu-padding: var(--layout-gutter);
  --mobile-menu-z: var(--z-overlay);
  --mobile-menu-scrim: var(--color-overlay);
  --mobile-menu-link-font: var(--text-h3);
  --mobile-menu-link-font-family: var(--font-family-ui); /* H3 size, UI family: menu links are navigation, not headings */
  --mobile-menu-link-min-height: var(--size-control-lg);
  --mobile-menu-link-border: var(--color-border);
  --mobile-menu-link-bg-hover: var(--color-surface-hover);
  --mobile-menu-link-indicator-current: var(--gradient-accent);
  --mobile-menu-toggle-size: var(--size-tap-min);
  --mobile-menu-toggle-icon: var(--icon-menu);
  --mobile-menu-close-icon: var(--icon-close);
  --mobile-menu-toggle-icon-size: var(--size-icon-lg);
  --mobile-menu-enter-duration: var(--motion-slow);
  --mobile-menu-enter-ease: var(--ease-emphasized);
  --mobile-menu-exit-duration: var(--motion-base);
  --mobile-menu-exit-ease: var(--ease-exit);
  --mobile-menu-enter-offset: var(--motion-distance-md);
  --mobile-menu-stagger: var(--motion-stagger);
  --mobile-menu-max-width: var(--layout-dialog); /* full screen on phones, a side sheet when the viewport is wider */
  --mobile-menu-shadow: var(--shadow-floating);
  --mobile-menu-gap: var(--space-stack-md); /* between links, CTA and quick contacts */
  --mobile-menu-safe-area: var(--safe-area-bottom);
  --mobile-menu-head-height: var(--size-nav); /* close button sits where the toggle was */
  --mobile-menu-head-z: var(--z-raised);
  --mobile-menu-logo-height: var(--size-logo-mark);
  --mobile-menu-duration: var(--motion-fast); /* hover / press colour changes */
  --mobile-menu-ease: var(--ease-standard);
  --mobile-menu-focus-ring: var(--focus-ring);
  --mobile-menu-link-text: var(--color-text);
  --mobile-menu-link-text-active: var(--color-text-muted);
  --mobile-menu-link-tracking: var(--text-h3-tracking);
  --mobile-menu-link-padding-block: var(--space-inset-xs);
  --mobile-menu-link-padding-inline: var(--space-inset-sm);
  --mobile-menu-link-gap: var(--space-inline-xs);
  --mobile-menu-link-radius: var(--radius-indicator);
  --mobile-menu-link-border-width: var(--border-width-hairline);
  --mobile-menu-link-bg-active: var(--color-surface-pressed);
  --mobile-menu-link-indicator-width: var(--size-accent-dash);
  --mobile-menu-link-indicator-height: var(--border-width-thick);
  --mobile-menu-link-indicator-radius: var(--radius-pill);
  --mobile-menu-toggle-bg: var(--color-none);
  --mobile-menu-toggle-color: var(--color-text);
  --mobile-menu-toggle-radius: var(--radius-round);
  --mobile-menu-toggle-bg-hover: var(--color-surface-hover);
  --mobile-menu-toggle-bg-active: var(--color-surface-pressed);
  --mobile-menu-toggle-color-disabled: var(--color-disabled-text);
  --mobile-menu-label-font: var(--text-label);
  --mobile-menu-label-tracking: var(--text-label-tracking);
  --mobile-menu-label-case: var(--text-label-case);
  --mobile-menu-label-color: var(--color-text-muted);
  --mobile-menu-contact-gap: var(--space-inline-2xs);
  --mobile-menu-contact-min-height: var(--size-control-lg);
  --mobile-menu-contact-padding: var(--space-inset-xs);
  --mobile-menu-contact-padding-inline: var(--space-inset-2xs); /* "Messenger" must fit a third of a 320px sheet */
  --mobile-menu-contact-radius: var(--radius-card);
  --mobile-menu-contact-text: var(--color-text);
  --mobile-menu-contact-bg: var(--color-none);
  --mobile-menu-contact-border: var(--color-border-strong);
  --mobile-menu-contact-border-width: var(--border-width-hairline);
  --mobile-menu-contact-font-size: var(--text-small-size);
  --mobile-menu-contact-font-weight: var(--weight-medium);
  --mobile-menu-contact-font-family: var(--font-family-ui);
  --mobile-menu-contact-icon-size: var(--size-icon-md);
  --mobile-menu-contact-bg-hover: var(--color-surface-hover);
  --mobile-menu-contact-bg-active: var(--color-surface-pressed);
  --mobile-menu-contact-text-disabled: var(--color-disabled-text);
  --mobile-menu-contact-border-disabled: var(--color-disabled-border);
  --mobile-menu-zalo-icon: var(--icon-chat);
  --mobile-menu-call-icon: var(--icon-phone);
  --mobile-menu-messenger-icon: var(--icon-messenger);
  --mobile-menu-note-font-size: var(--text-small-size);
  --mobile-menu-note-color: var(--color-text-muted);

  /* @component Sticky contact bar */
  --contact-bar-height: var(--size-contact-bar);
  --contact-bar-safe-area: var(--safe-area-bottom);
  --contact-bar-bg: var(--color-surface-glass);
  --contact-bar-blur: var(--blur-glass);
  --contact-bar-text: var(--color-text);
  --contact-bar-border: var(--color-border);
  --contact-bar-border-width: var(--border-width-hairline);
  --contact-bar-shadow: var(--shadow-floating);
  --contact-bar-z: var(--z-sticky);
  --contact-bar-item-min-height: var(--size-tap-min);
  --contact-bar-item-gap: var(--space-stack-3xs);
  --contact-bar-icon-size: var(--size-icon-lg);
  --contact-bar-logo-opacity-disabled: var(--opacity-disabled);
  --contact-bar-label-font-size: var(--text-small-size);
  --contact-bar-label-font-weight: var(--weight-medium);
  --contact-bar-label-font-family: var(--font-family-ui);
  --contact-bar-item-bg-hover: var(--color-action-subtle-hover);
  --contact-bar-item-bg-active: var(--color-action-subtle-active);
  --contact-bar-highlight: var(--color-accent-alt);
  --contact-bar-highlight-height: var(--border-width-thick);
  --contact-bar-focus-ring: var(--focus-ring);
  --contact-bar-enter-duration: var(--motion-slow);
  --contact-bar-enter-ease: var(--ease-emphasized);
  --contact-bar-enter-offset: var(--motion-distance-lg);
  --contact-bar-exit-duration: var(--motion-base);
  --contact-bar-exit-ease: var(--ease-exit);
  --contact-bar-duration: var(--motion-fast); /* hover / press colour changes */
  --contact-bar-ease: var(--ease-standard);
  --contact-bar-padding-block: var(--space-inset-2xs);
  --contact-bar-padding-inline: var(--space-inset-xs);
  --contact-bar-gap: var(--space-inline-3xs);
  --contact-bar-max-width: var(--layout-dialog); /* items stay thumb-sized on tablets */
  --contact-bar-item-radius: var(--radius-card);
  --contact-bar-item-bg: var(--color-none);
  --contact-bar-item-text-disabled: var(--color-disabled-text);
  --contact-bar-label-leading: var(--text-small-leading);
  --contact-bar-press-scale: var(--scale-pressed);
  --contact-bar-highlight-width: var(--size-accent-dash);
  --contact-bar-highlight-radius: var(--radius-pill);
  --contact-bar-zalo-icon: var(--icon-chat);
  --contact-bar-call-icon: var(--icon-phone);
  --contact-bar-messenger-icon: var(--icon-messenger);
  --contact-bar-signup-icon: var(--icon-edit);

  /* @component Footer */
  --footer-bg: var(--color-bg);
  --footer-text: var(--color-text);
  --footer-text-muted: var(--color-text-muted);
  --footer-padding-block: var(--space-section-tight);
  --footer-padding-inline: var(--layout-gutter);
  --footer-max-width: var(--layout-max);
  --footer-gap: var(--space-stack-xl);
  --footer-column-gap: var(--space-inline-xl);
  --footer-heading-font: var(--text-eyebrow); /* column headings: mono labels */
  --footer-heading-tracking: var(--text-eyebrow-tracking);
  --footer-heading-color: var(--color-text-muted);
  --footer-link: var(--color-text);
  --footer-link-hover: var(--color-text);
  --footer-link-underline-hover: var(--color-accent-alt);
  --footer-link-min-height: var(--size-tap-min);
  --footer-border: var(--color-border);
  --footer-border-width: var(--border-width-hairline);
  --footer-logo-width: var(--size-logo-lockup);
  --footer-fine-font-size: var(--text-small-size);
  --footer-focus-ring: var(--focus-ring);
  --footer-heading-case: var(--text-eyebrow-case);
  --footer-heading-gap: var(--space-stack-2xs);
  --footer-brand-gap: var(--space-stack-sm);
  --footer-bottom-gap: var(--space-stack-md);
  --footer-link-active: var(--color-text-muted);
  --footer-link-underline: var(--color-none); /* underline is drawn only on hover / current */
  --footer-link-underline-thickness: var(--border-width-thick);
  --footer-link-underline-offset: var(--underline-offset);
  --footer-link-radius: var(--radius-indicator);
  --footer-duration: var(--motion-fast);
  --footer-ease: var(--ease-standard);

  /* @component Section header */
  --section-header-gap: var(--space-stack-sm);
  --section-header-max-width: var(--layout-measure); /* ~40rem for the title and lead; the header box (and its rule) spans the column */
  --section-header-margin-bottom: var(--space-stack-xl);
  --section-header-label-font: var(--text-eyebrow); /* mono data label in capitals, no dash */
  --section-header-label-tracking: var(--text-eyebrow-tracking);
  --section-header-label-case: var(--text-eyebrow-case);
  --section-header-label-color: var(--color-text-muted);
  --section-header-rule: var(--color-border); /* .section-header--ruled: a hairline above the header */
  --section-header-rule-width: var(--border-width-hairline);
  --section-header-rule-gap: var(--space-stack-md); /* rule → label */
  --section-header-title-font: var(--text-h2);
  --section-header-title-tracking: var(--text-h2-tracking);
  --section-header-title-font-lg: var(--text-display); /* .section-header--lg from 30em (H1 size below): CTA band, chapter openers */
  --section-header-title-tracking-lg: var(--text-display-tracking);
  --section-header-title-font-lg-phone: var(--text-h1);
  --section-header-title-tracking-lg-phone: var(--text-h1-tracking);
  --section-header-title-color: var(--color-text);
  --section-header-lead-font: var(--text-lead);
  --section-header-lead-color: var(--color-text-muted);
  --section-header-enter-duration: var(--motion-slow);
  --section-header-enter-ease: var(--ease-emphasized);
  --section-header-enter-offset: var(--motion-distance-md);
  --section-header-stagger: var(--motion-stagger);

  /* @component Accordion (FAQ) */
  --accordion-border: var(--color-border);
  --accordion-border-width: var(--border-width-hairline);
  --accordion-trigger-min-height: var(--size-control-lg);
  --accordion-trigger-padding-block: var(--space-inset-md);
  --accordion-trigger-padding-inline: var(--space-inset-xs);
  --accordion-trigger-gap: var(--space-inline-sm);
  --accordion-trigger-font-size: var(--text-body-size);
  --accordion-trigger-font-weight: var(--weight-medium);
  --accordion-trigger-font-family: var(--font-family-ui);
  --accordion-trigger-text: var(--color-text);
  --accordion-trigger-bg-hover: var(--color-surface-hover);
  --accordion-trigger-radius: var(--radius-indicator);
  --accordion-icon: var(--icon-chevron-down);
  --accordion-icon-size: var(--size-icon-md);
  --accordion-icon-color: var(--color-text);
  --accordion-icon-rotate-open: var(--angle-flip);
  --accordion-marker-open: var(--color-accent);
  --accordion-marker-width: var(--border-width-thick);
  --accordion-panel-padding-block-end: var(--space-inset-lg);
  --accordion-panel-padding-inline: var(--space-inset-xs);
  --accordion-panel-text: var(--color-text);
  --accordion-duration: var(--motion-base);
  --accordion-ease: var(--ease-standard);
  --accordion-focus-ring: var(--focus-ring);
  --accordion-trigger-bg-active: var(--color-surface-pressed);
  --accordion-marker-closed: var(--color-none); /* the marker keeps its width while closed, so nothing shifts on open */
  --accordion-panel-gap: var(--space-stack-xs);
  --accordion-panel-enter-offset: var(--motion-distance-sm); /* answer drops in by this much; 0 under reduced motion */

  /* @component Toast & success message */
  --toast-bg: var(--color-surface);
  --toast-text: var(--color-text);
  --toast-border: var(--color-border);
  --toast-border-width: var(--border-width-hairline);
  --toast-radius: var(--radius-card);
  --toast-padding: var(--space-inset-md);
  --toast-gap: var(--space-inline-xs);
  --toast-shadow: var(--shadow-floating);
  --toast-max-width: var(--layout-popover);
  --toast-z: var(--z-toast);
  --toast-icon-size: var(--size-icon-md);
  --toast-accent-width: var(--size-accent-bar);
  --toast-success-bg: var(--color-success-surface);
  --toast-success-accent: var(--color-success);
  --toast-success-icon: var(--icon-check-circle);
  --toast-error-bg: var(--color-error-surface);
  --toast-error-accent: var(--color-error);
  --toast-error-icon: var(--icon-alert-circle); /* not a cross: that would read as "close" */
  --toast-close-size: var(--size-tap-min);
  --toast-close-icon: var(--icon-close);
  --toast-enter-duration: var(--motion-base);
  --toast-enter-ease: var(--ease-emphasized);
  --toast-exit-duration: var(--motion-fast);
  --toast-exit-ease: var(--ease-exit);
  --toast-enter-offset: var(--motion-distance-md);
  --toast-font-size: var(--text-body-size);
  --toast-leading: var(--text-body-leading);
  --toast-accent: var(--color-text); /* neutral tone */
  --toast-icon: var(--icon-check-circle); /* neutral tone */
  --toast-floating-bg: var(--color-bg); /* opaque base under the tone wash of a floating toast */
  --toast-close-icon-size: var(--size-icon-md);
  --toast-close-radius: var(--radius-round);
  --toast-close-color: var(--color-text);
  --toast-close-bg-hover: var(--color-surface-hover);
  --toast-close-bg-active: var(--color-surface-pressed);
  --toast-close-press-scale: var(--scale-pressed);
  --toast-focus-ring: var(--focus-ring);
  --toast-duration: var(--motion-fast);
  --toast-ease: var(--ease-standard);
  --toast-region-gap: var(--space-stack-xs);
  --toast-region-inset: var(--layout-gutter);
  --toast-region-offset: calc(var(--size-contact-bar) + var(--safe-area-bottom) + var(--space-stack-sm)); /* phones: clears the sticky contact bar */
  --toast-region-offset-lg: calc(var(--safe-area-bottom) + var(--space-stack-lg));
  --toast-dismiss-delay: var(--delay-toast);

  /* @component Modal */
  --modal-bg: var(--color-surface);
  --modal-surface: var(--color-bg);
  --modal-text: var(--color-text);
  --modal-border: var(--color-border);
  --modal-border-width: var(--border-width-hairline);
  --modal-radius: var(--radius-panel);
  --modal-padding: var(--space-inset-fluid);
  --modal-gap: var(--space-stack-md);
  --modal-max-width: var(--layout-dialog);
  --modal-shadow: var(--shadow-floating);
  --modal-scrim: var(--color-overlay);
  --modal-z: var(--z-modal);
  --modal-title-font: var(--text-h3);
  --modal-close-size: var(--size-tap-min);
  --modal-close-icon: var(--icon-close);
  --modal-enter-duration: var(--motion-base);
  --modal-enter-ease: var(--ease-emphasized);
  --modal-enter-scale: var(--scale-enter);
  --modal-enter-offset: var(--motion-distance-md);
  --modal-exit-duration: var(--motion-fast);
  --modal-exit-ease: var(--ease-exit);
  --modal-focus-ring: var(--focus-ring);
  --modal-title-tracking: var(--text-h3-tracking);
  --modal-header-gap: var(--space-inline-sm);
  --modal-body-gap: var(--space-stack-xs);
  --modal-actions-gap: var(--space-inline-xs);
  --modal-viewport-margin: var(--layout-gutter); /* min space between a centred dialog and the viewport edge */
  --modal-sheet-gap: var(--space-stack-xl); /* phones: min space above the bottom sheet, so the scrim stays tappable */
  --modal-sheet-enter-offset: var(--motion-distance-lg); /* phones: the sheet rises by this much; 0 under reduced motion */
  --modal-sheet-enter-scale: var(--scale-none);
  --modal-safe-area: var(--safe-area-bottom);
  --modal-close-bg: var(--color-none);
  --modal-close-color: var(--color-text);
  --modal-close-radius: var(--radius-round);
  --modal-close-icon-size: var(--size-icon-md);
  --modal-close-bg-hover: var(--color-action-subtle-hover);
  --modal-close-bg-active: var(--color-action-subtle-active);
  --modal-close-color-disabled: var(--color-disabled-text);
  --modal-close-press-scale: var(--scale-pressed);
  --modal-close-duration: var(--motion-fast);
  --modal-close-ease: var(--ease-standard);

  /* @component Breadcrumb */
  --breadcrumb-font-size: var(--text-small-size);
  --breadcrumb-font-family: var(--font-family-ui);
  --breadcrumb-font-weight: var(--weight-medium); /* the UI family has 600 only: say so, rather than ask for 400 and get 600 */
  --breadcrumb-text: var(--color-text-muted);
  --breadcrumb-text-hover: var(--color-text);
  --breadcrumb-text-current: var(--color-text);
  --breadcrumb-current-weight: var(--weight-medium);
  --breadcrumb-gap: var(--space-inline-2xs);
  --breadcrumb-item-min-height: var(--size-tap-min);
  --breadcrumb-separator-icon: var(--icon-chevron-right);
  --breadcrumb-separator-size: var(--size-icon-sm);
  --breadcrumb-separator-color: var(--color-text-muted);
  --breadcrumb-focus-ring: var(--focus-ring);
  --breadcrumb-item-min-width: var(--size-tap-min);
  --breadcrumb-item-padding-inline: var(--space-inset-2xs);
  --breadcrumb-text-active: var(--color-text);
  --breadcrumb-bg-active: var(--color-surface-pressed);
  --breadcrumb-underline: var(--color-none); /* drawn only on hover */
  --breadcrumb-underline-hover: var(--color-accent);
  --breadcrumb-underline-thickness: var(--border-width-thick);
  --breadcrumb-underline-offset: var(--underline-offset);
  --breadcrumb-radius: var(--radius-indicator);
  --breadcrumb-duration: var(--motion-fast);
  --breadcrumb-ease: var(--ease-standard);

  /* @component Pagination */
  --pagination-gap: var(--space-inline-2xs);
  --pagination-item-size: var(--size-tap-min);
  --pagination-item-radius: var(--radius-pill);
  --pagination-item-font-weight: var(--weight-medium);
  --pagination-font-family: var(--font-family-ui); /* page numbers and the compact status */
  --pagination-item-text: var(--color-text);
  --pagination-item-bg: var(--color-none);
  --pagination-item-bg-hover: var(--color-action-subtle-hover);
  --pagination-item-bg-active: var(--color-action-subtle-active);
  --pagination-item-bg-current: var(--color-action);
  --pagination-item-text-current: var(--color-action-text);
  --pagination-item-text-disabled: var(--color-disabled-text);
  --pagination-arrow-icon: var(--icon-chevron-right); /* "previous" rotates it by --pagination-arrow-rotate-prev */
  --pagination-arrow-rotate-prev: var(--angle-flip);
  --pagination-icon-size: var(--size-icon-md);
  --pagination-focus-ring: var(--focus-ring);
  --pagination-duration: var(--motion-fast);
  --pagination-ease: var(--ease-standard);
  --pagination-press-scale: var(--scale-pressed);
  --pagination-item-padding-inline: var(--space-inset-xs); /* room for 2–3 digit page numbers */
  --pagination-ellipsis-color: var(--color-text-muted);
  --pagination-status-color: var(--color-text); /* compact "Trang 2 / 5" */
  --pagination-status-font-weight: var(--weight-medium);
  --pagination-status-padding-inline: var(--space-inset-sm);

  /* @component Tabs */
  --tabs-gap: var(--space-inline-2xs);
  --tabs-border: var(--color-border);
  --tabs-border-width: var(--border-width-hairline);
  --tabs-tab-min-height: var(--size-tap-min);
  --tabs-tab-padding-inline: var(--space-inset-md);
  --tabs-tab-font-size: var(--text-body-size);
  --tabs-tab-font-weight: var(--weight-medium);
  --tabs-tab-font-family: var(--font-family-ui);
  --tabs-tab-text: var(--color-text-muted);
  --tabs-tab-text-hover: var(--color-text);
  --tabs-tab-text-selected: var(--color-text);
  --tabs-tab-text-disabled: var(--color-disabled-text);
  --tabs-tab-bg-hover: var(--color-surface-hover);
  --tabs-tab-radius: var(--radius-indicator);
  --tabs-indicator: var(--gradient-accent);
  --tabs-indicator-height: var(--border-width-thick);
  --tabs-indicator-duration: var(--motion-base);
  --tabs-indicator-ease: var(--ease-standard);
  --tabs-panel-padding-block: var(--space-stack-md);
  --tabs-focus-ring: var(--focus-ring);
  --tabs-list-inset: var(--space-inset-xs); /* room for the focus ring inside the scrolling tablist */
  --tabs-tab-bg-active: var(--color-surface-pressed);
  --tabs-duration: var(--motion-fast);
  --tabs-ease: var(--ease-standard);
  --tabs-indicator-opacity: var(--opacity-visible);
  --tabs-indicator-radius: var(--radius-pill);
  --tabs-panel-gap: var(--space-stack-sm);
  --tabs-panel-radius: var(--radius-indicator);
  --tabs-panel-enter-offset: var(--motion-distance-sm); /* 0 under reduced motion */
  --tabs-panel-duration: var(--motion-base);
  --tabs-panel-ease: var(--ease-emphasized);
  --tabs-stack-gap: var(--space-stack-xl); /* without JS: gap between the stacked panels */
  --tabs-heading-font: var(--text-h3);
  --tabs-heading-tracking: var(--text-h3-tracking);

  /* @component Divider */
  --divider-color: var(--color-border);
  --divider-width: var(--border-width-hairline);
  --divider-spacing: var(--space-stack-xl);
  --divider-accent: var(--gradient-accent); /* .divider--accent: kept for long-form pages; the home page uses plain hairlines (the aurora lives on the planet's ring) */
  --divider-accent-width: var(--border-width-thick);
  --divider-accent-length: var(--size-accent-dash);
  --divider-accent-radius: var(--radius-pill);
  --divider-vertical-min-length: var(--size-icon-md); /* vertical rule in a cluster */

  /* @component Image frame */
  --image-frame-radius: var(--radius-card);
  --image-frame-radius-lg: var(--radius-panel);
  --image-frame-bg: var(--color-surface-hover);
  --image-frame-border: var(--color-border);
  --image-frame-border-width: var(--border-width-hairline);
  --image-frame-ratio: var(--ratio-photo);
  --image-frame-ratio-wide: var(--ratio-wide);
  --image-frame-ratio-square: var(--ratio-square);
  --image-frame-ratio-portrait: var(--ratio-portrait);
  --image-frame-caption-color: var(--color-text-muted);
  --image-frame-caption-font-size: var(--text-small-size);
  --image-frame-caption-gap: var(--space-stack-xs);
  --image-frame-placeholder-bg: var(--color-surface);
  --image-frame-placeholder-text: var(--color-text-muted);
  --image-frame-placeholder-font-size: var(--text-small-size); /* "Ảnh sẽ cập nhật" */
  --image-frame-placeholder-padding: var(--space-inset-md);
  --image-frame-tag-bg: var(--color-surface-glass); /* "Ảnh minh hoạ" tag on brand mockups */
  --image-frame-tag-text: var(--color-text);
  --image-frame-tag-font-size: var(--text-small-size);
  --image-frame-tag-font-weight: var(--weight-medium);
  --image-frame-tag-font-family: var(--font-family-ui);
  --image-frame-tag-height: var(--size-badge);
  --image-frame-tag-padding-inline: var(--space-inset-xs);
  --image-frame-tag-radius: var(--radius-pill);
  --image-frame-tag-offset: var(--space-inset-sm);

  /* @component Planet row */
  --planet-row-d: var(--size-planet-d); /* Earth dot diameter; gap between dots = d */
  --planet-row-d-sm: var(--size-planet-d-sm);
  --planet-row-d-lg: var(--size-planet-d-lg);
  --planet-row-outline: var(--color-planet-outline);
  --planet-row-outline-width: var(--border-width-hairline);
  --planet-row-label-color: var(--color-text-muted);
  --planet-row-label-font-size: var(--text-small-size);
  --planet-row-label-gap: var(--space-stack-2xs);
  --planet-row-mercury: var(--color-planet-mercury);
  --planet-row-venus: var(--color-planet-venus);
  --planet-row-earth: var(--color-planet-earth);
  --planet-row-mars: var(--color-planet-mars);
  --planet-row-jupiter: var(--color-planet-jupiter);
  --planet-row-saturn: var(--color-planet-saturn);
  --planet-row-uranus: var(--color-planet-uranus);
  --planet-row-neptune: var(--color-planet-neptune);
  --planet-row-mercury-scale: var(--ratio-planet-mercury);
  --planet-row-venus-scale: var(--ratio-planet-venus);
  --planet-row-earth-scale: var(--ratio-planet-earth);
  --planet-row-mars-scale: var(--ratio-planet-mars);
  --planet-row-jupiter-scale: var(--ratio-planet-jupiter);
  --planet-row-saturn-scale: var(--ratio-planet-saturn);
  --planet-row-uranus-scale: var(--ratio-planet-uranus);
  --planet-row-neptune-scale: var(--ratio-planet-neptune);
  --planet-row-dot-radius: var(--radius-round);
  --planet-row-name-hidden-size: var(--border-width-hairline); /* visually hidden names: 1px clipped box */
  --planet-row-labelled-max-width: var(--layout-dialog); /* --labelled: 8 columns, room for "Thiên Vương" */
  --planet-row-length: var(--ratio-planet-row-length); /* row width in Earth dots: a row never exceeds its container (d ≤ width ÷ 18) */
  --planet-row-dot-ratio: var(--ratio-square);
  --planet-row-gap-scale: var(--ratio-planet-earth); /* gap between dots = one Earth dot */

  /* @component Planet (navy disc + aurora ring: the logo's O as an object) */
  --planet-size: var(--size-planet-md); /* disc diameter D; the ring spans D × (rx + stroke ÷ 2) */
  --planet-size-sm: var(--size-planet-sm); /* .planet--sm: orbit-diagram centre */
  --planet-size-hero: var(--size-planet-hero); /* .planet--hero: home hero, fluid */
  --planet-body: var(--color-planet-body); /* navy on cream; night on navy bands, so it never dissolves */
  --planet-rim: var(--color-border); /* hairline edge: invisible on cream, defines the disc on navy / night */
  --planet-rim-width: var(--border-width-hairline);
  --planet-radius: var(--radius-round);
  --planet-ring: var(--gradient-accent); /* the O-ring gradient, never recoloured */
  --planet-ring-rx: var(--geometry-ring-rx);
  --planet-ring-ry: var(--geometry-ring-ry);
  --planet-ring-stroke: var(--geometry-ring-stroke);
  --planet-ring-tilt: var(--angle-ring-tilt);
  --planet-gap-ratio: var(--ratio-ring-gap); /* cut-out band = 1.55 × ring stroke (logo spec) */
  --planet-gap-color: var(--color-bg); /* the cut-out shows the surface the planet sits on */
  --planet-mask: var(--color-text); /* any opaque colour: fill of the ring masks */
  --planet-edge-feather: var(--border-width-hairline); /* anti-aliased edge where the back half meets the disc */

  /* @component Hero */
  --hero-padding-block-start: var(--space-stack-xl); /* below the sticky nav */
  --hero-padding-block-end: var(--space-section-tight);
  --hero-gap: var(--space-stack-xl); /* copy ↔ planet, stacked */
  --hero-column-gap: var(--space-inline-xl); /* copy ↔ planet, side by side from 64em */
  --hero-copy-gap: var(--space-stack-md);
  --hero-copy-max-width: var(--layout-narrow);
  --hero-label-font: var(--text-eyebrow); /* mono data label in capitals */
  --hero-label-tracking: var(--text-eyebrow-tracking);
  --hero-label-case: var(--text-eyebrow-case);
  --hero-label-color: var(--color-text-muted);
  --hero-title-font: var(--text-h1); /* phones */
  --hero-title-tracking: var(--text-h1-tracking);
  --hero-title-font-lg: var(--text-display); /* from 30em */
  --hero-title-tracking-lg: var(--text-display-tracking);
  --hero-title-color: var(--color-text);
  --hero-lead-font: var(--text-lead);
  --hero-lead-color: var(--color-text-muted);
  --hero-lead-max-width: var(--layout-dialog);
  --hero-actions-gap: var(--space-inline-xs);
  --hero-note-font: var(--text-data); /* "Khai giảng 03/11/2026 · 465A Chợ Hàng": facts, as a mono data line */
  --hero-note-tracking: var(--text-data-tracking);
  --hero-note-color: var(--color-text-muted);
  --hero-planets-offset: var(--space-stack-xs); /* extra room above the decorative planet row */
  --hero-flight-length: var(--scene-flight-length); /* through-ring scene (js/motion/scenes/through-ring.js, ≥ --bp-md): pinned scroll = this × viewport height; the camera flies through the gap between the disc and the ring */
  --hero-flight-hold: var(--scene-flight-hold); /* the copy stays fully readable for this share of the pin; the planet only grows in place */
  --hero-flight-copy-out: var(--scene-flight-copy-out); /* the copy has faded out by this share, then stops taking clicks */
  --hero-flight-copy-rise: var(--motion-distance-lg); /* … drifting up this far as it fades */
  --hero-flight-copy-ease: var(--ease-exit); /* the copy accelerates away */
  --hero-flight-aim: var(--scene-flight-aim); /* by this share the ring has levelled and opened, and the gap has glided (from the hold on) to the centre of the visible hero */
  --hero-flight-aim-ease: var(--ease-orbit); /* slow lift-off, long glide */
  --hero-flight-ring-angle: var(--angle-none); /* deg: the ring levels out from --planet-ring-tilt */
  --hero-flight-ring-open: var(--scale-ring-open); /* ring (+ cut-out) scaleY once open: a 3D-looking tilt, a wider gap to fly through */
  --hero-flight-approach-ease: var(--ease-linear); /* the camera's distance to the gap shrinks steadily; the planet's scale is 1 ÷ that distance (end scale measured: the gap then covers the visible hero) */
  --hero-flight-night-from: var(--scene-flight-night-from); /* .hero__night fades in from this share (the cream cut-out fades out with it) … */
  --hero-flight-reveal-ease: var(--ease-exit); /* the night circle opens slowly, then rushes to the screen edges */
  --hero-flight-night-to: var(--scene-flight-night-to); /* … and the hero is night from this share */
  --hero-flight-fade: var(--scene-flight-fade); /* the planet dissolves from this share to the end of the pin */
  --hero-flight-scrub: var(--motion-base); /* scrub catch-up with native scrolling (touch); none under Lenis, which already glides */
  --hero-flight-scale-small: var(--scale-approach); /* < --bp-md: no pin; the planet grows to this while its stage scrolls up to the nav */
  --hero-flight-night-lead-small: var(--scene-flight-night-lead-small); /* < --bp-md: the night fades in from when the copy's bottom is this × viewport height below the nav until the hero's bottom reaches the nav */

  /* @component Feature list ("Vì sao chọn OSE") */
  --feature-list-gap: var(--space-stack-lg); /* between items, stacked */
  --feature-list-column-gap: var(--space-inline-xl); /* three columns from 48em */
  --feature-list-item-gap: var(--space-stack-xs);
  --feature-list-item-padding-block: var(--space-inset-lg); /* below the hairline that opens each item */
  --feature-list-divider: var(--color-border);
  --feature-list-divider-width: var(--border-width-hairline);
  --feature-list-title-font: var(--text-title); /* heading family; no icon, no number: the reasons are not a sequence */
  --feature-list-title-tracking: var(--text-title-tracking);
  --feature-list-title-color: var(--color-text);
  --feature-list-text-color: var(--color-text-muted);

  /* @component Chapter nav (home chapter index: 01 Lộ trình · 02 Lớp học · 03 Khai giảng) */
  --chapter-nav-bg: var(--color-bg); /* phones and tablets: a plain list on its surface */
  --chapter-nav-bg-sticky: var(--color-surface-glass); /* ≥ 64em: glass bar, like the site nav */
  --chapter-nav-blur: var(--blur-glass);
  --chapter-nav-text: var(--color-text);
  --chapter-nav-offset: var(--size-nav); /* ≥ 64em: sticks right under the site nav */
  --chapter-nav-height: var(--size-chapter-nav); /* ≥ 64em: bar height (also part of --layout-sticky-top) */
  --chapter-nav-z: var(--z-sticky); /* under the site nav (--z-header), above the page */
  --chapter-nav-max-width: var(--layout-max);
  --chapter-nav-padding-inline: var(--layout-gutter);
  --chapter-nav-padding-block: var(--space-inset-md); /* below 64em: room above and below the list */
  --chapter-nav-column-gap: var(--layout-gap); /* from 48em: the gap that splits the track into one segment per chapter */
  --chapter-nav-link-min-height: var(--size-tap-min);
  --chapter-nav-link-gap: var(--space-inline-xs); /* number ↔ label */
  --chapter-nav-link-radius: var(--radius-indicator); /* shape of the focus ring */
  --chapter-nav-link-font-family: var(--font-family-ui);
  --chapter-nav-link-font-size: var(--text-small-size);
  --chapter-nav-link-font-weight: var(--weight-medium);
  --chapter-nav-link-leading: var(--text-small-leading);
  --chapter-nav-link-text: var(--color-text);
  --chapter-nav-link-text-active: var(--color-text-muted);
  --chapter-nav-number-font: var(--text-data); /* 01 · 02 · 03: mono data labels */
  --chapter-nav-number-tracking: var(--text-data-tracking);
  --chapter-nav-number-color: var(--color-text-muted);
  --chapter-nav-number-color-current: var(--color-text); /* aria-current: the chapter in view */
  --chapter-nav-track: var(--color-border); /* hairline under each link; also the static look of the progress bar */
  --chapter-nav-track-hover: var(--color-border-strong);
  --chapter-nav-track-width: var(--border-width-hairline);
  --chapter-nav-progress: var(--color-text); /* chapter-nav scene running: ink bar, scaleX scrubbed through the chapter */
  --chapter-nav-progress-width: var(--border-width-thick);
  --chapter-nav-edge-slack: var(--border-width-hairline); /* chapter-nav scene (≥ 64em): a chapter turns current, and its bar starts, this far before its top reaches the bar's bottom edge, so a jump that lands exactly on the edge (rounded scroll position) still marks its chapter */
  --chapter-nav-focus-ring: var(--focus-ring);
  --chapter-nav-duration: var(--motion-fast);
  --chapter-nav-ease: var(--ease-standard);

  /* @component Path (learning path: orbit diagram + three stages) */
  --path-gap: var(--space-none); /* stacked: the stages' own rules and padding space them */
  --path-column-gap: var(--space-inline-2xl); /* ≥ 64em: diagram half ↔ stages half */
  --path-sticky-top: calc(var(--layout-sticky-top) + var(--space-stack-lg)); /* ≥ 64em: the diagram sticks below the nav and the chapter bar */
  --path-diagram-max: calc(var(--size-screen) - var(--path-sticky-top) - var(--space-stack-lg)); /* the sticky diagram never runs past the bottom of the screen */
  --path-diagram-ratio: var(--ratio-square);
  --path-orbit-1: var(--geometry-orbit-1); /* Chặng 1 · Tiếng Anh trẻ em: orbit diameter ÷ diagram width */
  --path-orbit-2: var(--geometry-orbit-2); /* Chặng 2 · THCS */
  --path-orbit-3: var(--geometry-orbit-3); /* Chặng 3 · IELTS */
  --path-orbit-color: var(--color-border-strong);
  --path-orbit-width: var(--border-width-hairline);
  --path-orbit-radius: var(--radius-round);
  --path-orbit-light: var(--color-text); /* the lit orbit: full ink, never the aurora (the planet's ring is the one aurora) */
  --path-orbit-light-width: var(--border-width-thick);
  --path-orbit-light-opacity: var(--opacity-hidden); /* lights off at rest; the scene fades them */
  --path-orbit-light-opacity-current: var(--opacity-visible); /* .path__orbit--current */
  --path-tick-font: var(--text-data); /* "01 Trẻ em" on top of each orbit */
  --path-tick-tracking: var(--text-data-tracking);
  --path-tick-color: var(--color-text-muted);
  --path-tick-bg: var(--color-bg); /* opaque: cuts the orbit line behind the tick */
  --path-tick-height: var(--size-badge);
  --path-tick-padding-inline: var(--space-inset-xs);
  --path-marker-size: var(--size-planet-d); /* "con của bạn": a 12px dot */
  --path-marker-color: var(--color-text);
  --path-marker-halo: var(--color-bg); /* gap ring that lifts the dot off the orbit line */
  --path-marker-halo-width: var(--border-width-thick);
  --path-marker-label-font: var(--text-data);
  --path-marker-label-tracking: var(--text-data-tracking);
  --path-marker-label-color: var(--color-text);
  --path-marker-label-bg: var(--color-bg);
  --path-marker-label-gap: var(--space-inline-2xs);
  --path-marker-label-padding-inline: var(--space-inset-2xs);
  --path-mini-size: var(--size-avatar); /* < 64em: the small diagram that opens each stage */
  --path-mini-planet-size: var(--size-icon-lg); /* its planet's disc D */
  --path-mini-gap: var(--space-stack-xs);
  --path-stage-min-height: var(--size-chapter-step); /* ≥ 64em: one stage per scroll step */
  --path-stages-tail: var(--space-section); /* ≥ 64em: extra room under the last stage so the sticky diagram stays until it is read */
  --path-stage-gap: var(--space-stack-sm);
  --path-stage-padding-block: var(--space-stack-xl);
  --path-rule: var(--color-border); /* hairlines: above each stage and each fact */
  --path-rule-width: var(--border-width-hairline);
  --path-label-font: var(--text-data); /* "Chặng 1" */
  --path-label-tracking: var(--text-data-tracking);
  --path-label-color: var(--color-text-muted);
  --path-title-font: var(--text-h2); /* each stage reads as its own screen */
  --path-title-tracking: var(--text-h2-tracking);
  --path-title-color: var(--color-text);
  --path-facts-margin-block: var(--space-stack-xs);
  --path-facts-column-gap: var(--space-inline-lg); /* ≥ 48em: term ↔ detail */
  --path-fact-padding-block: var(--space-inset-sm);
  --path-term-gap: var(--space-stack-3xs); /* < 48em: term → its detail */
  --path-term-font: var(--text-data); /* "Dành cho", "Hình thức", "Mục tiêu" */
  --path-term-tracking: var(--text-data-tracking);
  --path-term-color: var(--color-text-muted);
  --path-detail-color: var(--color-text);
  --path-mini-marker-size: var(--size-planet-d-sm); /* < 64em: the 8px dot (no label) the learning-path scene adds to each small diagram */
  --path-stage-dim-opacity: var(--opacity-dim); /* learning-path scene, ≥ 64em: the stages not being read (never below 0.45; 0.75 keeps the 70 % labels at 4.9:1 on night) */
  --path-scene-sweep: var(--scene-path-sweep); /* learning-path scene: the marker's angle, clockwise from 6 o'clock on orbit 1, over the whole journey (stage 1 top → stage 3 bottom crossing mid-screen) */
  --path-scene-transfer: var(--scene-path-transfer); /* ≥ 64em: share of one stage's scroll over which the marker moves out, the light grows to the next orbit and the focus hands over; centred on the boundary between two stages */
  --path-scene-ease: var(--ease-orbit); /* the move out to the next orbit: the marker's radius and the light's growth */
  --path-scene-catch-up: var(--motion-base); /* ≥ 64em, native scrolling only: the diagram catches up with the scroll over this time (Lenis already glides the wheel) */
  --path-scene-snap-start: var(--scene-path-snap); /* < 64em: viewport fraction (from the top) the small diagram's centre reaches when its marker moves */
  --path-scene-snap-duration: var(--motion-slow); /* < 64em: one short, timed move (not scrubbed), once */
  --path-scene-snap-ease: var(--ease-emphasized);

  /* @component Classroom (illustrated seating plan + class facts) */
  --classroom-gap: var(--space-stack-xl); /* plan ↔ facts, stacked */
  --classroom-column-gap: var(--space-inline-2xl); /* ≥ 64em: plan half ↔ facts half */
  --classroom-plan-max: var(--layout-popover); /* 7 columns of seats stay evenly spaced up to this width */
  --classroom-plan-gap: var(--space-inline-xs);
  --classroom-seat-size: var(--size-seat); /* 24 → 36px */
  --classroom-seat-radius: var(--radius-round);
  --classroom-seat: var(--color-text); /* a filled seat: one child */
  --classroom-adult-border: var(--color-text); /* teacher and assistant: rings */
  --classroom-adult-border-width: var(--border-width-thick);
  --classroom-role-font: var(--text-data); /* "Giáo viên", "Trợ giảng" */
  --classroom-role-tracking: var(--text-data-tracking);
  --classroom-role-color: var(--color-text-muted);
  --classroom-role-gap: var(--space-stack-3xs);
  --classroom-caption-font: var(--text-data);
  --classroom-caption-tracking: var(--text-data-tracking);
  --classroom-caption-color: var(--color-text-muted);
  --classroom-caption-gap: var(--space-stack-md);
  --classroom-data-gap: var(--space-stack-md); /* stats ↔ note */
  --classroom-stats-gap: var(--layout-gap);
  --classroom-note-max-width: var(--layout-measure);
  --classroom-note-font-size: var(--text-small-size);
  --classroom-note-color: var(--color-text-muted);
  --classroom-scene-start: var(--scene-classroom-start); /* classroom scene (js/motion/scenes/classroom.js, no pin): begins when the plan's top edge reaches this fraction of the viewport height; < --bp-md the plan, then the stats list, each play once at this line */
  --classroom-scene-end: var(--scene-classroom-end); /* ≥ --bp-md: rings and seats are scrubbed in by the time the plan's top edge reaches this fraction; the figures count once the stats list's top edge has passed it too */
  --classroom-scene-scale: var(--scale-appear); /* a ring or a seat grows from this scale as it appears */
  --classroom-scene-ease: var(--ease-emphasized); /* rings, seats and figures settling in */
  --classroom-scene-duration: var(--motion-base); /* one ring or one seat appearing (scrubbed ≥ --bp-md: only the ratio to the stagger matters) */
  --classroom-scene-stagger: var(--motion-stagger); /* teacher → assistant, seat after seat in U order, figure after figure */
  --classroom-scene-fade-duration: var(--motion-slow); /* a figure fading in; "1 + 1" only fades */
  --classroom-scene-count-duration: var(--motion-scene); /* one figure counting 0 → its data-count, always played in time, never scrubbed, so it never rests on a wrong number */
  --classroom-scene-count-ease: var(--ease-standard); /* the count slows into its number */
  --classroom-scene-scrub: var(--motion-fast); /* ≥ --bp-md without smooth scrolling (touch): scrub catch-up */

  /* @component Stat (one fact as a big figure + mono label) */
  --stat-gap: var(--space-stack-2xs);
  --stat-padding-block: var(--space-inset-md); /* below the hairline that opens the stat */
  --stat-rule: var(--color-border);
  --stat-rule-width: var(--border-width-hairline);
  --stat-value-font: var(--text-stat); /* heading family, tabular figures */
  --stat-value-tracking: var(--text-stat-tracking);
  --stat-value-color: var(--color-text);
  --stat-label-font: var(--text-data);
  --stat-label-tracking: var(--text-data-tracking);
  --stat-label-color: var(--color-text-muted);

  /* @component Countdown (time left to the opening) */
  --countdown-gap: var(--space-stack-md);
  --countdown-unit-gap: var(--space-stack-3xs); /* figure → its label */
  --countdown-unit-padding-inline: var(--space-inset-md);
  --countdown-rule: var(--color-border); /* hairline between the units */
  --countdown-rule-width: var(--border-width-hairline);
  --countdown-value-font: var(--text-stat); /* phones */
  --countdown-value-tracking: var(--text-stat-tracking);
  --countdown-value-font-lg: var(--text-display); /* from 48em */
  --countdown-value-tracking-lg: var(--text-display-tracking);
  --countdown-value-color: var(--color-text);
  --countdown-label-font: var(--text-data); /* ngày · giờ · phút · giây */
  --countdown-label-tracking: var(--text-data-tracking);
  --countdown-label-color: var(--color-text-muted);
  --countdown-track: var(--color-border); /* the rule under the figures; also the line's static look */
  --countdown-track-width: var(--border-width-hairline);
  --countdown-line: var(--color-text); /* countdown scene running: ink bar, scaleX scrubbed */
  --countdown-line-width: var(--border-width-thick);
  --countdown-fill-length: var(--scene-countdown-fill); /* countdown scene: the line fills (scaleX 0 → 1) over this × the viewport height of scroll, from when the track enters the screen */
  --countdown-fill-ease: var(--ease-linear); /* scrubbed, so linear: the bar follows the scroll exactly */
  --countdown-note-max-width: var(--layout-measure);
  --countdown-note-font-size: var(--text-small-size);
  --countdown-note-color: var(--color-text-muted);
  --countdown-date-font: var(--text-title); /* "Khai giảng ngày 03.11.2026": stands in for the figures without JS and once the opening has passed */
  --countdown-date-tracking: var(--text-title-tracking);
  --countdown-date-color: var(--color-text);

  /* @component Steps ("Bắt đầu thế nào") */
  --steps-gap: var(--space-stack-md); /* between steps, stacked */
  --steps-column-gap: var(--space-inline-xl); /* from 48em: room after each step's text; the rule above runs on unbroken from step to step */
  --steps-item-gap: var(--space-stack-xs); /* number ↔ text */
  --steps-item-padding-block: var(--space-inset-lg); /* below the hairline that opens each step */
  --steps-rule: var(--color-border); /* the path: one hairline, no dashes, no circles */
  --steps-rule-width: var(--border-width-hairline);
  --steps-number-font: var(--text-data); /* 01 · 02 · 03: mono data labels (CSS pads single digits) */
  --steps-number-tracking: var(--text-data-tracking);
  --steps-number-color: var(--color-text);
  --steps-text-font: var(--text-lead);
  --steps-text-color: var(--color-text);

  /* @component CTA band (night call-to-action band) */
  --cta-band-bg: var(--color-bg-deep); /* night on every surface: the page's deepest chapter */
  --cta-band-text: var(--color-text);
  --cta-band-padding-block: var(--space-section);
  --cta-band-padding-inline: var(--layout-gutter);
  --cta-band-max-width: var(--layout-max);
  --cta-band-column-gap: var(--space-inline-2xl); /* from 64em: three columns, header across two, actions in the third */
  --cta-band-actions-gap: var(--space-inline-xs);
  --cta-band-note-gap: var(--space-stack-md);
  --cta-band-note-font-size: var(--text-small-size);
  --cta-band-note-color: var(--color-text-muted);
  --cta-band-content-z: var(--z-raised); /* above .starfield (--starfield-z) */
  --cta-band-logo-size: var(--size-icon-lg); /* the official Zalo logo inside "Nhắn Zalo" */

  /* @component Starfield */
  --starfield-z: var(--z-base); /* .starfield sits under the band's content (content gets --z-raised) */
  --starfield-max: var(--count-stars); /* stars per band, far + mid + near together (spec: ≤ 150) */
  --starfield-max-small: var(--count-stars-small); /* below --bp-md: lighter for phones */
  --starfield-star-color: var(--color-starlight);
  --starfield-star-radius-far: var(--size-star-sm);
  --starfield-star-radius-mid: var(--size-star-md);
  --starfield-star-radius-near: var(--size-star-lg);
  --starfield-opacity-far: var(--opacity-faint); /* each layer canvas's resting opacity */
  --starfield-opacity-mid: var(--opacity-soft);
  --starfield-opacity-near: var(--opacity-visible);
  --starfield-depth-far: var(--motion-distance-lg); /* parallax: a layer drifts from -depth to +depth while the band crosses the viewport; far drifts most, so it looks slowest */
  --starfield-depth-mid: var(--motion-distance-md);
  --starfield-depth-near: var(--motion-distance-sm);
  --starfield-twinkle-duration: var(--motion-ambient); /* one breath; ≥ --bp-md only, paused off screen */
  --starfield-twinkle-ratio: var(--ratio-twinkle); /* a layer dims to this share of its resting opacity */
  --starfield-twinkle-ease: var(--ease-orbit);

  /* @component Skip link */
  --skip-link-bg: var(--color-action);
  --skip-link-text: var(--color-action-text);
  --skip-link-radius: var(--radius-control);
  --skip-link-padding-inline: var(--space-inset-lg);
  --skip-link-min-height: var(--size-tap-min);
  --skip-link-offset: var(--space-stack-sm);
  --skip-link-z: var(--z-skip-link);
  --skip-link-focus-ring: var(--focus-ring);
  --skip-link-font-size: var(--text-body-size);
  --skip-link-font-weight: var(--weight-ui);
  --skip-link-font-family: var(--font-family-ui);
  --skip-link-leading: var(--text-display-leading);
  --skip-link-bg-hover: var(--color-action-hover);
  --skip-link-bg-active: var(--color-action-active);
  --skip-link-opacity-hidden: var(--opacity-hidden);
  --skip-link-opacity-visible: var(--opacity-visible);
  --skip-link-enter-offset: var(--motion-distance-sm); /* rises into place on focus */
  --skip-link-duration: var(--motion-fast);
  --skip-link-ease: var(--ease-emphasized);
}