/* ============================================================================
   DIRECTION C: WARM SIGNAL
   Semantic layer. Every token here aliases a primitive.
   This is the only layer base.css is allowed to read.

   Mode structure, per CLAUDE.md: the complete light palette on bare :root, then
   only-what-changes for each of the other three mode states. Every one of those
   is written twice, as a media block guarded so an explicit choice still wins,
   and again as a [data-mode] block. See the MODES banner below.
   ========================================================================= */

:root {

  /* ======================================================================
     SURFACE
     Load-bearing in this direction. Containers have no border, so the
     lightness delta between a surface and its ground is the only thing
     drawing the box. Measured, that delta is 1.09:1 in light and 1.23:1 in
     dark, which is far below any WCAG threshold. So: a surface may separate
     content here, but it may never be the sole carrier of meaning. State
     goes through text, icon or accent, never through surface alone.
     ==================================================================== */
  --surface-page:             var(--color-sand-100);
  --surface-subtle:           var(--color-sand-200);
  --surface-raised:           var(--color-sand-50);
  --surface-sunken:           var(--color-sand-200);
  --surface-inverse:          var(--color-sand-900);
  --surface-accent:           var(--color-terra-600);
  --surface-accent-hover:     var(--color-terra-700);
  --surface-accent-subtle:    var(--color-terra-50);
  --surface-critical-subtle:  var(--color-clay-50);
  --surface-positive-subtle:  var(--color-sage-50);
  --surface-scrim:            var(--color-scrim-light);
  --surface-selection:        var(--color-highlight-terra);

  /* No surface at all. The component tier needs a way to say "draw
     nothing here" without reaching past this layer to the transparent
     primitive. */
  --surface-none:             var(--color-transparent);

  /* ======================================================================
     TEXT
     ==================================================================== */
  --text-primary:    var(--color-sand-900);
  --text-secondary:  var(--color-sand-700);
  --text-muted:      var(--color-sand-600);
  --text-on-accent:  var(--color-sand-0);
  --text-on-inverse: var(--color-sand-100);
  --text-accent:     var(--color-terra-700);
  --text-link:       var(--color-terra-700);
  --text-link-hover: var(--color-terra-900);
  --text-critical:   var(--color-clay-700);
  --text-positive:   var(--color-sage-700);
  --text-selection:  var(--color-sand-900);

  /* ======================================================================
     BORDER
     border-container resolves to transparent. That is the direction's
     argument, stated as a token rather than as an omission in a stylesheet:
     containers are drawn by surface and shadow, not by an outline. The
     load-bearing borders (strong, interactive, focus) still exist and still
     clear WCAG 1.4.11 at 3:1, because a focus ring is not decoration.
     ==================================================================== */
  --border-subtle:      var(--color-sand-300);
  --border-container:   var(--color-transparent);
  --border-strong:      var(--color-sand-500);
  --border-interactive: var(--color-sand-500);
  --border-accent:      var(--color-terra-600);
  --border-focus:       var(--color-terra-600);
  --border-critical:    var(--color-clay-600);
  --divider-color:      var(--color-transparent);

  --border-width-none:     var(--border-width-0);
  --border-width-hairline: var(--border-width-1);
  --border-width-default:  var(--border-width-1);
  --border-width-strong:   var(--border-width-2);
  --border-width-accent:   var(--border-width-4);

  /* ======================================================================
     FOCUS
     ==================================================================== */
  --focus-ring-color:  var(--border-focus);
  --focus-ring-width:  var(--border-width-3);
  --focus-ring-offset: var(--space-75);
  --focus-ring-style:  solid;

  /* Rendered width of a glyph stroke, independent of the glyph's box size.
     See --switcher-icon-stroke for how that independence is achieved. */
  --icon-stroke-width: var(--stroke-width-regular);

  /* ======================================================================
     TYPOGRAPHY: families by role
     One family throughout. Register is carried by weight, size and case.
     ==================================================================== */
  --font-family-display: var(--font-family-geometric);
  --font-family-prose:   var(--font-family-geometric);
  --font-family-ui:      var(--font-family-geometric);
  --font-family-code:    var(--font-family-mono);

  --type-display-font:      var(--font-family-display);
  --type-display-size:      var(--font-size-7xl);
  --type-display-weight:    var(--font-weight-extrabold);
  --type-display-leading:   var(--line-height-tight);
  --type-display-tracking:  var(--letter-spacing-tighter);
  --type-display-transform: none;

  /* headline: a page title that runs longer than a few words, a sentence
     rather than a name. It exists because the scale had nothing between the
     section heading and display: a title like "Harbor 2.0" sits well at the
     display size, a sentence at that size filled the first screen. Before
     adding another step here, check whether this one is the step you need.
     Display register, so it shares display's family, weight, leading and
     tracking; only the size steps down, to the same two-thirds of display in
     both directions. */
  --type-headline-font:      var(--font-family-display);
  --type-headline-size:      var(--font-size-5xl);
  --type-headline-weight:    var(--font-weight-extrabold);
  --type-headline-leading:   var(--line-height-tight);
  --type-headline-tracking:  var(--letter-spacing-tighter);
  --type-headline-transform: none;

  --type-lede-font:      var(--font-family-prose);
  --type-lede-size:      var(--font-size-xl);
  --type-lede-weight:    var(--font-weight-medium);
  --type-lede-leading:   var(--line-height-snug);
  --type-lede-tracking:  var(--letter-spacing-tight);
  --type-lede-transform: none;

  --type-heading-font:      var(--font-family-display);
  --type-heading-size:      var(--font-size-3xl);
  --type-heading-weight:    var(--font-weight-bold);
  --type-heading-leading:   var(--line-height-snug);
  --type-heading-tracking:  var(--letter-spacing-tight);
  --type-heading-transform: none;

  --type-subheading-font:      var(--font-family-display);
  --type-subheading-size:      var(--font-size-xl);
  --type-subheading-weight:    var(--font-weight-bold);
  --type-subheading-leading:   var(--line-height-snug);
  --type-subheading-tracking:  var(--letter-spacing-normal);
  --type-subheading-transform: none;

  --type-body-font:     var(--font-family-prose);
  --type-body-size:     var(--font-size-md);
  --type-body-weight:   var(--font-weight-regular);
  --type-body-leading:  var(--line-height-relaxed);
  --type-body-tracking: var(--letter-spacing-normal);

  --type-body-lg-font:     var(--font-family-prose);
  --type-body-lg-size:     var(--font-size-lg);
  --type-body-lg-weight:   var(--font-weight-regular);
  --type-body-lg-leading:  var(--line-height-relaxed);
  --type-body-lg-tracking: var(--letter-spacing-normal);

  --type-body-sm-font:     var(--font-family-prose);
  --type-body-sm-size:     var(--font-size-sm);
  --type-body-sm-weight:   var(--font-weight-regular);
  --type-body-sm-leading:  var(--line-height-normal);
  --type-body-sm-tracking: var(--letter-spacing-normal);

  --type-emphasis-weight: var(--font-weight-bold);

  --type-eyebrow-font:      var(--font-family-ui);
  --type-eyebrow-size:      var(--font-size-3xs);
  --type-eyebrow-weight:    var(--font-weight-bold);
  --type-eyebrow-leading:   var(--line-height-snug);
  --type-eyebrow-tracking:  var(--letter-spacing-widest);
  --type-eyebrow-transform: uppercase;

  --type-label-font:      var(--font-family-ui);
  --type-label-size:      var(--font-size-3xs);
  --type-label-weight:    var(--font-weight-bold);
  --type-label-leading:   var(--line-height-snug);
  --type-label-tracking:  var(--letter-spacing-wider);
  --type-label-transform: uppercase;

  --type-caption-font:      var(--font-family-ui);
  --type-caption-size:      var(--font-size-sm);
  --type-caption-weight:    var(--font-weight-semibold);
  --type-caption-leading:   var(--line-height-normal);
  --type-caption-tracking:  var(--letter-spacing-normal);
  --type-caption-transform: none;

  --type-ui-font:      var(--font-family-ui);
  --type-ui-size:      var(--font-size-sm);
  --type-ui-weight:    var(--font-weight-semibold);
  --type-ui-leading:   var(--line-height-snug);
  --type-ui-tracking:  var(--letter-spacing-normal);
  --type-ui-transform: none;

  --type-ui-sm-size:   var(--font-size-xs);

  /* A control label is not prose emphasis, so it does not borrow
     --type-emphasis-weight, which is 600 here and 700 in the other theme. Both
     themes want their controls semibold. */
  --type-control-weight: var(--font-weight-semibold);

  --type-metric-font:     var(--font-family-display);
  --type-metric-size:     var(--font-size-6xl);
  --type-metric-weight:   var(--font-weight-extrabold);
  --type-metric-leading:  var(--line-height-solid);
  --type-metric-tracking: var(--letter-spacing-tighter);

  --type-metric-label-font:      var(--font-family-ui);
  --type-metric-label-size:      var(--font-size-xs);
  --type-metric-label-weight:    var(--font-weight-semibold);
  --type-metric-label-leading:   var(--line-height-normal);
  --type-metric-label-tracking:  var(--letter-spacing-normal);
  --type-metric-label-transform: none;

  --type-quote-font:     var(--font-family-display);
  --type-quote-size:     var(--font-size-2xl);
  --type-quote-weight:   var(--font-weight-semibold);
  --type-quote-leading:  var(--line-height-snug);
  --type-quote-tracking: var(--letter-spacing-tight);
  --type-quote-style:    normal;

  --type-code-font:    var(--font-family-code);
  --type-code-size:    var(--font-size-xs);
  --type-code-weight:  var(--font-weight-regular);
  --type-code-leading: var(--line-height-normal);

  /* ======================================================================
     SPACE
     The most generous of the three. Surfaces need internal air or they read
     as a colour swatch instead of as a container.
     ==================================================================== */
  --space-none:      var(--space-0);

  --space-inset-2xs: var(--space-100);
  --space-inset-xs:  var(--space-150);
  --space-inset-sm:  var(--space-200);
  --space-inset-md:  var(--space-300);
  --space-inset-lg:  var(--space-400);
  /* No consumer anywhere in css/ as of Sep 10, 2026. It was moved with the
     rest of the ramp so the progression stays even, which means it changes
     nothing today and is only right for whoever reaches for it first. */
  --space-inset-xl:  var(--space-600);
  --space-inset-2xl: var(--space-800);

  --space-stack-2xs: var(--space-50);
  --space-stack-xs:  var(--space-100);
  --space-stack-sm:  var(--space-200);
  --space-stack-md:  var(--space-300);
  --space-stack-lg:  var(--space-500);
  --space-stack-xl:  var(--space-800);
  --space-stack-2xl: var(--space-1200);
  --space-stack-3xl: var(--space-1600);

  --space-inline-2xs: var(--space-75);
  --space-inline-xs:  var(--space-150);
  --space-inline-sm:  var(--space-200);
  --space-inline-md:  var(--space-300);
  --space-inline-lg:  var(--space-500);
  --space-inline-xl:  var(--space-800);

  --space-prose-paragraph:      var(--space-300);
  --space-prose-heading-after:  var(--space-300);

  --space-section:       var(--space-1000);
  --space-section-tight: var(--space-800);
  --space-gutter:        var(--space-300);
  --space-gutter-lg:     var(--space-800);
  --space-rule:          var(--space-600);

  /* Control geometry. The Figma specifies the same button metrics in both
     themes (spacing/spacing-M 8 and spacing/spacing-L 12), so these resolve
     identically here. The theme difference is the radius, not the box. */
  --space-control-inset:   var(--space-150);
  --space-control-gap:     var(--space-100);
  --space-control-icon:    var(--space-300);
  --space-control-glyph:   var(--space-250);
  --space-control-chevron: var(--space-150);

  /* ======================================================================
     LAYOUT
     ==================================================================== */
  --measure-prose:      var(--measure-64);
  --measure-narrow:     var(--measure-52);
  --measure-display:    var(--measure-40);
  --layout-content-max: var(--width-720);
  --layout-wide-max:    var(--width-1100);
  --layout-full-max:    var(--width-1320);

  /* Width of a control that has to hold its longest label without the
     layout moving when the label changes. */
  --control-width-wide: var(--width-176);

  /* Largest size of a portrait photograph. The resume's is the only one on
     the site as of Sep 13, 2026. It fills its column and this caps it, which
     only bites when the layout stacks to one column. */
  --media-portrait-size: var(--width-400);

  /* ======================================================================
     RADIUS
     ==================================================================== */
  --radius-control: var(--radius-full);
  --radius-surface: var(--radius-md);
  --radius-card:    var(--radius-lg);
  --radius-media:   var(--radius-lg);
  --radius-pill:    var(--radius-full);

  /* ---- controls: the graspable part of a range or a drag handle ---- */
  --control-handle-size:  var(--space-600);   /* 3rem / 48px */
  --control-track-height: var(--space-75);    /* 6px */
  --radius-focus:   var(--radius-md);

  /* ======================================================================
     ELEVATION
     ==================================================================== */
  --elevation-flat:    var(--shadow-light-0);
  --elevation-raised:  var(--shadow-light-2);
  --elevation-sticky:  var(--shadow-light-3);
  --elevation-overlay: var(--shadow-light-4);


  /* ======================================================================
     STACKING
     The same three roles as elevation, because they answer the same
     question in the other axis: raised sits above the page, sticky above
     raised, overlay above everything. Identical in every direction.
     ==================================================================== */
  --layer-raised:  var(--layer-10);
  --layer-sticky:  var(--layer-20);
  --layer-overlay: var(--layer-30);


  /* ======================================================================
     COMPONENT
     The third tier, and the reason there is one layout stylesheet instead of
     four. Every one of these aliases a semantic token, and the layout writes
     each property unconditionally: the token decides whether it is visible.

     Direction C draws with surface and elevation. Every rule width here is
     none, and the boxes B outlines are instead padded, filled and lifted.

     One exception is flagged rather than hidden. --stats-columns is a raw
     number. A column count has no semantic equivalent to alias, and inventing
     one would be worse than admitting this.
     ==================================================================== */
  --layout-breakout-max:      var(--layout-wide-max);
  --section-gap:              var(--space-section);
  --section-title-measure:    var(--measure-display);
  --section-rule-width:       var(--border-width-none);
  --section-rule-gap:         var(--space-none);

  --figure-inset:             var(--space-inset-lg);
  --figure-surface:           var(--surface-raised);
  --figure-elevation:         var(--elevation-raised);
  --figure-radius:            var(--radius-card);
  --figure-media-border:      var(--border-width-none);
  /* Reproduces exactly what this theme already did: the media sits on the
     subtle surface and its border colour is transparent, so no border is
     drawn and the raised card does the containing. Named here so both themes
     answer the same question in the same place. */
  --figure-media-surface:      var(--surface-subtle);
  --figure-media-border-color: var(--border-container);

  --caption-gap:              var(--space-stack-md);
  --caption-measure:          var(--measure-narrow);
  --caption-inset-block:      var(--space-none);
  --caption-inset-inline:     var(--space-none);
  --caption-surface:          var(--surface-none);
  --caption-border:           var(--border-width-none);

  --stats-columns:            2;
  --stats-gap:                var(--space-stack-md);
  --stats-edge-width:         var(--border-width-none);
  --stat-inset:               var(--space-inset-lg);
  --stat-surface:             var(--surface-raised);
  --stat-elevation:           var(--elevation-flat);
  --stat-radius:              var(--radius-card);
  --stat-rule-width:          var(--border-width-none);

  /* Entry list: the Work index and the About links. Raised cards, the same
     answer this theme gives for stats. No rules until high contrast, where
     a surface alone may not separate one card from the next. */
  --entry-list-gap:           var(--space-stack-md);
  --entry-list-edge-width:    var(--border-width-none);
  --entry-inset-block:        var(--space-inset-lg);
  --entry-inset-inline:       var(--space-inset-lg);
  --entry-surface:            var(--surface-raised);
  --entry-elevation:          var(--elevation-flat);
  --entry-radius:             var(--radius-card);
  --entry-rule-width:         var(--border-width-none);

  /* The compare divider draws over the before and after label chips. That is
     an ordering inside one component, so it is written against the chips'
     layer here rather than taking a rung on the global ladder. */
  --compare-divider-layer:    calc(var(--layer-raised) + 1);

  --pullquote-inset-block:    var(--space-inset-2xl);
  --pullquote-inset-inline:   var(--space-inset-2xl);
  --pullquote-surface:        var(--surface-subtle);
  --pullquote-radius:         var(--radius-surface);
  --pullquote-rule-width:     var(--border-width-none);

  /* The mode and theme triggers. Figma node 68:3440. Sand takes the pill
     radius; the metrics are otherwise identical to Slate.

     --switcher-label-size points at --type-ui-sm-size rather than
     --type-ui-size, because this theme's UI step is 15px and the design asks
     for 14. The same 14px in both themes, reached by a different rung. */
  --switcher-radius:         var(--radius-control);
  --switcher-inset-inline:   var(--space-control-inset);
  --switcher-inset-block:    var(--space-control-gap);
  --switcher-gap:            var(--space-control-gap);
  --switcher-icon-box:       var(--space-control-icon);
  --switcher-icon-glyph:     var(--space-control-glyph);
  --switcher-icon-stroke:    var(--icon-stroke-width);
  --switcher-chevron-size:   var(--space-control-chevron);
  --switcher-mode-min-width: var(--control-width-wide);
  --switcher-label-font:     var(--type-ui-font);
  --switcher-label-size:     var(--type-ui-sm-size);
  --switcher-label-weight:   var(--type-control-weight);

  /* ======================================================================
     MOTION
     ==================================================================== */
  --motion-duration-instant:  var(--duration-0);
  --motion-duration-ui:       var(--duration-200);
  --motion-duration-emphasis: var(--duration-300);
  --motion-duration-page:     var(--duration-400);

  --motion-ease-ui:       var(--easing-standard);
  --motion-ease-enter:    var(--easing-entrance);
  --motion-ease-exit:     var(--easing-exit);
  --motion-ease-emphasis: var(--easing-emphasized);
}

/* ==========================================================================
   MODES
   Four states on one axis: light, dark, light-hc, dark-hc. Carried on the root
   element as data-mode, and inferred from prefers-color-scheme and
   prefers-contrast when nothing is set.

   Each state is written twice, once as a media block and once as an attribute
   block, with identical declarations. scripts/lint.py fails if any twin pair
   differs by a single declaration, which is what makes the duplication safe.

   The guard on each media block stands the block down for any explicitly
   chosen mode that is not its own, so an explicit choice beats the system
   preference in both directions.

   Order matters once, and only once: on a system that reports both dark and
   more-contrast with no attribute set, the dark block and the dark-hc block
   both match at equal specificity. dark-hc is written last and therefore wins.
   ========================================================================= */

/* -- dark ---------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]):not([data-mode="light-hc"]):not([data-mode="dark-hc"]) {
    color-scheme:              dark;
    --surface-page:            var(--color-sand-900);
    --surface-subtle:          var(--color-sand-950);
    --surface-raised:          var(--color-sand-800);
    --surface-sunken:          var(--color-sand-950);
    --surface-inverse:         var(--color-sand-100);
    --surface-accent:          var(--color-terra-400);
    --surface-accent-hover:    var(--color-terra-300);
    --surface-accent-subtle:   var(--color-sand-800);
    --surface-critical-subtle: var(--color-clay-900);
    --surface-positive-subtle: var(--color-sage-900);
    --surface-scrim:           var(--color-scrim-dark);
    --surface-selection:       var(--color-highlight-terra-dk);
    --text-primary:            var(--color-sand-50);
    --text-secondary:          var(--color-sand-300);
    --text-muted:              var(--color-sand-400);
    --text-on-accent:          var(--color-sand-950);
    --text-on-inverse:         var(--color-sand-900);
    --text-accent:             var(--color-terra-300);
    --text-link:               var(--color-terra-300);
    --text-link-hover:         var(--color-terra-200);
    --text-critical:           var(--color-clay-300);
    --text-positive:           var(--color-sage-300);
    --text-selection:          var(--color-sand-50);
    --border-subtle:           var(--color-sand-700);
    --border-container:        var(--color-transparent);
    --border-strong:           var(--color-sand-500);
    --border-interactive:      var(--color-sand-500);
    --border-accent:           var(--color-terra-400);
    --border-focus:            var(--color-terra-300);
    --border-critical:         var(--color-clay-400);
    --divider-color:           var(--color-transparent);
    --elevation-flat:          var(--shadow-dark-0);
    --elevation-raised:        var(--shadow-dark-2);
    --elevation-sticky:        var(--shadow-dark-3);
    --elevation-overlay:       var(--shadow-dark-4);
  }
}

:root[data-mode="dark"] {
  color-scheme:              dark;
  --surface-page:            var(--color-sand-900);
  --surface-subtle:          var(--color-sand-950);
  --surface-raised:          var(--color-sand-800);
  --surface-sunken:          var(--color-sand-950);
  --surface-inverse:         var(--color-sand-100);
  --surface-accent:          var(--color-terra-400);
  --surface-accent-hover:    var(--color-terra-300);
  --surface-accent-subtle:   var(--color-sand-800);
  --surface-critical-subtle: var(--color-clay-900);
  --surface-positive-subtle: var(--color-sage-900);
  --surface-scrim:           var(--color-scrim-dark);
  --surface-selection:       var(--color-highlight-terra-dk);
  --text-primary:            var(--color-sand-50);
  --text-secondary:          var(--color-sand-300);
  --text-muted:              var(--color-sand-400);
  --text-on-accent:          var(--color-sand-950);
  --text-on-inverse:         var(--color-sand-900);
  --text-accent:             var(--color-terra-300);
  --text-link:               var(--color-terra-300);
  --text-link-hover:         var(--color-terra-200);
  --text-critical:           var(--color-clay-300);
  --text-positive:           var(--color-sage-300);
  --text-selection:          var(--color-sand-50);
  --border-subtle:           var(--color-sand-700);
  --border-container:        var(--color-transparent);
  --border-strong:           var(--color-sand-500);
  --border-interactive:      var(--color-sand-500);
  --border-accent:           var(--color-terra-400);
  --border-focus:            var(--color-terra-300);
  --border-critical:         var(--color-clay-400);
  --divider-color:           var(--color-transparent);
  --elevation-flat:          var(--shadow-dark-0);
  --elevation-raised:        var(--shadow-dark-2);
  --elevation-sticky:        var(--shadow-dark-3);
  --elevation-overlay:       var(--shadow-dark-4);
}

/* -- light, high contrast ------------------------------------------------ */
@media (prefers-contrast: more) and (prefers-color-scheme: light) {
  :root:not([data-mode="light"]):not([data-mode="dark"]):not([data-mode="dark-hc"]) {
    color-scheme:           light;
    --surface-page:         var(--color-sand-0);
    --surface-subtle:       var(--color-sand-100);
    --surface-raised:       var(--color-sand-100);
    --surface-accent:       var(--color-terra-800);
    --surface-accent-hover: var(--color-terra-900);
    --text-primary:         var(--color-sand-1000);
    --text-secondary:       var(--color-sand-900);
    --text-muted:           var(--color-sand-800);
    --text-accent:          var(--color-terra-800);
    --text-link:            var(--color-terra-800);
    --text-link-hover:      var(--color-terra-900);
    --text-critical:        var(--color-clay-800);
    --text-positive:        var(--color-sage-800);
    --border-subtle:        var(--color-sand-700);
    --border-container:     var(--color-sand-1000);
    --border-strong:        var(--color-sand-1000);
    --border-interactive:   var(--color-sand-1000);
    --border-accent:        var(--color-terra-800);
    --border-focus:         var(--color-terra-800);
    --border-critical:      var(--color-clay-800);
    --divider-color:        var(--color-sand-1000);
    --focus-ring-width:     var(--border-width-4);
    --elevation-flat:       var(--shadow-light-0);
    --elevation-raised:     var(--shadow-light-0);
    --elevation-sticky:     var(--shadow-light-0);
    --section-rule-width:   var(--border-width-strong);
    --section-rule-gap:     var(--space-inset-md);
    --figure-media-border:  var(--border-width-default);
    --caption-border:       var(--border-width-default);
    --caption-inset-block:  var(--space-inset-xs);
    --caption-inset-inline: var(--space-inset-sm);
    --stat-rule-width:      var(--border-width-default);
    --stats-edge-width:     var(--border-width-strong);
    --entry-rule-width:     var(--border-width-default);
    --entry-list-edge-width: var(--border-width-strong);
    --pullquote-rule-width: var(--border-width-strong);
  }
}

:root[data-mode="light-hc"] {
  color-scheme:           light;
  --surface-page:         var(--color-sand-0);
  --surface-subtle:       var(--color-sand-100);
  --surface-raised:       var(--color-sand-100);
  --surface-accent:       var(--color-terra-800);
  --surface-accent-hover: var(--color-terra-900);
  --text-primary:         var(--color-sand-1000);
  --text-secondary:       var(--color-sand-900);
  --text-muted:           var(--color-sand-800);
  --text-accent:          var(--color-terra-800);
  --text-link:            var(--color-terra-800);
  --text-link-hover:      var(--color-terra-900);
  --text-critical:        var(--color-clay-800);
  --text-positive:        var(--color-sage-800);
  --border-subtle:        var(--color-sand-700);
  --border-container:     var(--color-sand-1000);
  --border-strong:        var(--color-sand-1000);
  --border-interactive:   var(--color-sand-1000);
  --border-accent:        var(--color-terra-800);
  --border-focus:         var(--color-terra-800);
  --border-critical:      var(--color-clay-800);
  --divider-color:        var(--color-sand-1000);
  --focus-ring-width:     var(--border-width-4);
  --elevation-flat:       var(--shadow-light-0);
  --elevation-raised:     var(--shadow-light-0);
  --elevation-sticky:     var(--shadow-light-0);
  --section-rule-width:   var(--border-width-strong);
  --section-rule-gap:     var(--space-inset-md);
  --figure-media-border:  var(--border-width-default);
  --caption-border:       var(--border-width-default);
  --caption-inset-block:  var(--space-inset-xs);
  --caption-inset-inline: var(--space-inset-sm);
  --stat-rule-width:      var(--border-width-default);
  --stats-edge-width:     var(--border-width-strong);
  --entry-rule-width:     var(--border-width-default);
  --entry-list-edge-width: var(--border-width-strong);
  --pullquote-rule-width: var(--border-width-strong);
}

/* -- dark, high contrast ------------------------------------------------- */
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]):not([data-mode="dark"]):not([data-mode="light-hc"]) {
    color-scheme:              dark;
    --surface-page:            var(--color-sand-1000);
    --surface-subtle:          var(--color-sand-950);
    --surface-raised:          var(--color-sand-950);
    --surface-sunken:          var(--color-sand-1000);
    --surface-inverse:         var(--color-sand-0);
    --surface-accent:          var(--color-terra-200);
    --surface-accent-hover:    var(--color-terra-100);
    --surface-accent-subtle:   var(--color-sand-950);
    --surface-critical-subtle: var(--color-sand-950);
    --surface-positive-subtle: var(--color-sand-950);
    --surface-scrim:           var(--color-scrim-dark);
    --surface-selection:       var(--color-highlight-terra-dk);
    --text-primary:            var(--color-sand-0);
    --text-secondary:          var(--color-sand-0);
    --text-muted:              var(--color-sand-200);
    --text-on-accent:          var(--color-sand-1000);
    --text-on-inverse:         var(--color-sand-1000);
    --text-accent:             var(--color-terra-200);
    --text-link:               var(--color-terra-200);
    --text-link-hover:         var(--color-terra-100);
    --text-critical:           var(--color-clay-200);
    --text-positive:           var(--color-sage-200);
    --text-selection:          var(--color-sand-0);
    --border-subtle:           var(--color-sand-400);
    --border-container:        var(--color-sand-0);
    --border-strong:           var(--color-sand-0);
    --border-interactive:      var(--color-sand-0);
    --border-accent:           var(--color-terra-200);
    --border-focus:            var(--color-terra-200);
    --border-critical:         var(--color-clay-200);
    --divider-color:           var(--color-sand-0);
    --focus-ring-width:        var(--border-width-4);
    --elevation-flat:          var(--shadow-dark-0);
    --elevation-raised:        var(--shadow-dark-0);
    --elevation-sticky:        var(--shadow-dark-0);
    --elevation-overlay:       var(--shadow-dark-4);
    --section-rule-width:      var(--border-width-strong);
    --section-rule-gap:        var(--space-inset-md);
    --figure-media-border:     var(--border-width-default);
    --caption-border:          var(--border-width-default);
    --caption-inset-block:     var(--space-inset-xs);
    --caption-inset-inline:    var(--space-inset-sm);
    --stat-rule-width:         var(--border-width-default);
    --stats-edge-width:        var(--border-width-strong);
    --entry-rule-width:        var(--border-width-default);
    --entry-list-edge-width:   var(--border-width-strong);
    --pullquote-rule-width:    var(--border-width-strong);
  }
}

:root[data-mode="dark-hc"] {
  color-scheme:              dark;
  --surface-page:            var(--color-sand-1000);
  --surface-subtle:          var(--color-sand-950);
  --surface-raised:          var(--color-sand-950);
  --surface-sunken:          var(--color-sand-1000);
  --surface-inverse:         var(--color-sand-0);
  --surface-accent:          var(--color-terra-200);
  --surface-accent-hover:    var(--color-terra-100);
  --surface-accent-subtle:   var(--color-sand-950);
  --surface-critical-subtle: var(--color-sand-950);
  --surface-positive-subtle: var(--color-sand-950);
  --surface-scrim:           var(--color-scrim-dark);
  --surface-selection:       var(--color-highlight-terra-dk);
  --text-primary:            var(--color-sand-0);
  --text-secondary:          var(--color-sand-0);
  --text-muted:              var(--color-sand-200);
  --text-on-accent:          var(--color-sand-1000);
  --text-on-inverse:         var(--color-sand-1000);
  --text-accent:             var(--color-terra-200);
  --text-link:               var(--color-terra-200);
  --text-link-hover:         var(--color-terra-100);
  --text-critical:           var(--color-clay-200);
  --text-positive:           var(--color-sage-200);
  --text-selection:          var(--color-sand-0);
  --border-subtle:           var(--color-sand-400);
  --border-container:        var(--color-sand-0);
  --border-strong:           var(--color-sand-0);
  --border-interactive:      var(--color-sand-0);
  --border-accent:           var(--color-terra-200);
  --border-focus:            var(--color-terra-200);
  --border-critical:         var(--color-clay-200);
  --divider-color:           var(--color-sand-0);
  --focus-ring-width:        var(--border-width-4);
  --elevation-flat:          var(--shadow-dark-0);
  --elevation-raised:        var(--shadow-dark-0);
  --elevation-sticky:        var(--shadow-dark-0);
  --elevation-overlay:       var(--shadow-dark-4);
  --section-rule-width:      var(--border-width-strong);
  --section-rule-gap:        var(--space-inset-md);
  --figure-media-border:     var(--border-width-default);
  --caption-border:          var(--border-width-default);
  --caption-inset-block:     var(--space-inset-xs);
  --caption-inset-inline:    var(--space-inset-sm);
  --stat-rule-width:         var(--border-width-default);
  --stats-edge-width:        var(--border-width-strong);
  --entry-rule-width:        var(--border-width-default);
  --entry-list-edge-width:   var(--border-width-strong);
  --pullquote-rule-width:    var(--border-width-strong);
}

/* ==========================================================================
   FORCED COLOURS
   The operating system owns the palette here, so nothing below sets a colour
   ratio: it sets the two things forced-colors mode cannot fix on its own.

   A transparent border stays transparent under forced colours. Direction C
   resolves --divider-color and --border-container to transparent, so without
   this block its containers would have no edge at all in Windows High
   Contrast. Every structural border is repointed at a system colour and every
   rule width is forced to a real width, exactly as in the -hc modes.
   ========================================================================= */
@media (forced-colors: active) {
  :root {
    --border-subtle:      CanvasText;
    --border-container:   CanvasText;
    --border-strong:      CanvasText;
    --border-interactive: CanvasText;
    --border-accent:      CanvasText;
    --border-critical:    CanvasText;
    --divider-color:      CanvasText;
    --border-focus:       Highlight;
    --focus-ring-color:   Highlight;

    --section-rule-width:   var(--border-width-strong);
    --section-rule-gap:     var(--space-inset-md);
    --figure-media-border:  var(--border-width-default);
    --caption-border:       var(--border-width-default);
    --caption-inset-block:  var(--space-inset-xs);
    --caption-inset-inline: var(--space-inset-sm);
    --stat-rule-width:      var(--border-width-default);
    --stats-edge-width:     var(--border-width-strong);
    --entry-rule-width:     var(--border-width-default);
    --entry-list-edge-width: var(--border-width-strong);
    --pullquote-rule-width: var(--border-width-strong);
  }
}

/* ==========================================================================
   REDUCED MOTION: collapsed at the token layer.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-ui:       1ms;
    --motion-duration-emphasis: 1ms;
    --motion-duration-page:     1ms;
  }
}