/* ============================================================================
   DIRECTION B: SPECIMEN GRID
   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
     The page is white and the deltas between surfaces are almost nothing
     (1.03:1). That is the direction's argument: separation comes from rules,
     not from tinted panels. Because surface lightness is not readable here,
     nothing in this direction may use surface alone to carry meaning.
     ==================================================================== */
  --surface-page:             var(--color-slate-0);
  --surface-subtle:           var(--color-slate-100);
  --surface-raised:           var(--color-slate-50);
  --surface-sunken:           var(--color-slate-100);
  --surface-inverse:          var(--color-slate-900);
  --surface-accent:           var(--color-blue-600);
  --surface-accent-hover:     var(--color-blue-700);
  --surface-accent-subtle:    var(--color-blue-50);
  --surface-critical-subtle:  var(--color-red-50);
  --surface-positive-subtle:  var(--color-green-50);
  --surface-scrim:            var(--color-scrim-light);
  --surface-selection:        var(--color-highlight-blue);

  /* 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-slate-900);
  --text-secondary:  var(--color-slate-600);
  --text-muted:      var(--color-slate-500);
  --text-on-accent:  var(--color-slate-0);
  --text-on-inverse: var(--color-slate-50);
  --text-accent:     var(--color-blue-700);
  --text-link:       var(--color-blue-700);
  --text-link-hover: var(--color-blue-900);
  --text-critical:   var(--color-red-700);
  --text-positive:   var(--color-green-700);
  --text-selection:  var(--color-slate-900);

  /* ======================================================================
     BORDER
     The load-bearing part of this direction. border-subtle and
     border-container are decorative; border-strong, border-interactive and
     border-focus are held to WCAG 1.4.11 (3:1).
     ==================================================================== */
  --border-subtle:      var(--color-slate-200);
  --border-container:   var(--color-slate-300);
  --border-strong:      var(--color-slate-500);
  --border-interactive: var(--color-slate-500);
  --border-accent:      var(--color-blue-600);
  --border-focus:       var(--color-blue-600);
  --border-critical:    var(--color-red-600);
  --divider-color:      var(--color-slate-200);

  --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-2);

  /* ======================================================================
     FOCUS
     ==================================================================== */
  --focus-ring-color:  var(--border-focus);
  --focus-ring-width:  var(--border-width-2);
  --focus-ring-offset: var(--space-25);
  --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 grotesque for content. Monospace wherever the text is describing
     other text rather than being read for meaning.
     ==================================================================== */
  --font-family-display: var(--font-family-grotesque);
  --font-family-prose:   var(--font-family-grotesque);
  --font-family-ui:      var(--font-family-grotesque);
  --font-family-code:    var(--font-family-mono);

  --type-display-font:      var(--font-family-display);
  --type-display-size:      var(--font-size-6xl);
  --type-display-weight:    var(--font-weight-semibold);
  --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-4xl);
  --type-headline-weight:    var(--font-weight-semibold);
  --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-regular);
  --type-lede-leading:   var(--line-height-normal);
  --type-lede-tracking:  var(--letter-spacing-tight);
  --type-lede-transform: none;

  --type-heading-font:      var(--font-family-display);
  --type-heading-size:      var(--font-size-2xl);
  --type-heading-weight:    var(--font-weight-semibold);
  --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-lg);
  --type-subheading-weight:    var(--font-weight-semibold);
  --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-semibold);

  --type-eyebrow-font:      var(--font-family-code);
  --type-eyebrow-size:      var(--font-size-2xs);
  --type-eyebrow-weight:    var(--font-weight-medium);
  --type-eyebrow-leading:   var(--line-height-snug);
  --type-eyebrow-tracking:  var(--letter-spacing-wider);
  --type-eyebrow-transform: uppercase;

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

  --type-caption-font:      var(--font-family-code);
  --type-caption-size:      var(--font-size-xs);
  --type-caption-weight:    var(--font-weight-regular);
  --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-medium);
  --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-5xl);
  --type-metric-weight:   var(--font-weight-semibold);
  --type-metric-leading:  var(--line-height-solid);
  --type-metric-tracking: var(--letter-spacing-tighter);

  --type-metric-label-font:      var(--font-family-code);
  --type-metric-label-size:      var(--font-size-2xs);
  --type-metric-label-weight:    var(--font-weight-regular);
  --type-metric-label-leading:   var(--line-height-normal);
  --type-metric-label-tracking:  var(--letter-spacing-wider);
  --type-metric-label-transform: uppercase;

  --type-quote-font:     var(--font-family-display);
  --type-quote-size:     var(--font-size-xl);
  --type-quote-weight:   var(--font-weight-regular);
  --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
     Tighter than the other two directions everywhere except around rules,
     which need air on both sides or they read as underlines.
     ==================================================================== */
  --space-none:      var(--space-0);

  --space-inset-2xs: var(--space-50);
  --space-inset-xs:  var(--space-75);
  --space-inset-sm:  var(--space-150);
  --space-inset-md:  var(--space-200);
  --space-inset-lg:  var(--space-300);
  --space-inset-xl:  var(--space-500);
  --space-inset-2xl: var(--space-600);

  --space-stack-2xs: var(--space-25);
  --space-stack-xs:  var(--space-75);
  --space-stack-sm:  var(--space-150);
  --space-stack-md:  var(--space-250);
  --space-stack-lg:  var(--space-400);
  --space-stack-xl:  var(--space-600);
  --space-stack-2xl: var(--space-800);
  --space-stack-3xl: var(--space-1000);

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

  --space-prose-paragraph:      var(--space-250);
  --space-prose-heading-after:  var(--space-200);

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

  /* 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
     A narrower measure than Direction A. 15px Inter at 66ch is roughly the
     same physical column as 19px Source Serif at 64ch.
     ==================================================================== */
  --measure-prose:      var(--measure-72);
  --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-sm);
  --radius-surface: var(--radius-none);
  --radius-card:    var(--radius-none);
  --radius-media:   var(--radius-none);
  --radius-pill:    var(--radius-full);

  /* ---- controls: the graspable part of a range or a drag handle ---- */
  --control-handle-size:  var(--space-400);   /* 2rem / 32px */
  --control-track-height: var(--space-25);    /* 2px */
  --radius-focus:   var(--radius-none);

  /* ======================================================================
     ELEVATION
     raised resolves to none. In a ruled layout, a shadow is a second answer
     to a question the rule has already answered.
     ==================================================================== */
  --elevation-flat:    var(--shadow-light-0);
  --elevation-raised:  var(--shadow-light-1);
  --elevation-sticky:  var(--shadow-light-2);
  --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 B draws with rules. Sections are separated by a rule, figures
     are framed rather than lifted, the stat block is a ruled list.

     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-full-max);
  --section-gap:              var(--space-section-tight);
  --section-title-measure:    none;
  --section-rule-width:       var(--border-width-strong);
  --section-rule-gap:         var(--space-inset-md);

  --figure-inset:             var(--space-inset-md);
  --figure-surface:           var(--surface-subtle);
  --figure-elevation:         var(--elevation-flat);
  --figure-radius:            var(--radius-media);
  --figure-media-border:      var(--border-width-default);
  /* The media gets a surface and a border colour of its own, so it does not
     dissolve into the panel behind it. --border-container is what the panel
     itself is drawn with, and against --surface-subtle it measures 1.36:1 in
     light, well under the 3:1 a boundary needs. --border-strong clears it. */
  --figure-media-surface:      var(--surface-page);
  --figure-media-border-color: var(--border-strong);

  --caption-gap:              var(--space-stack-sm);
  --caption-measure:          none;
  --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:            1;
  --stats-gap:                var(--space-none);
  --stats-edge-width:         var(--border-width-strong);
  --stat-inset:               var(--space-inset-xs);
  --stat-surface:             var(--surface-none);
  --stat-elevation:           var(--elevation-flat);
  --stat-radius:              var(--radius-surface);
  --stat-rule-width:          var(--border-width-hairline);

  /* Entry list: the Work index and the About links. Ruled rows, the same
     answer this theme gives for stats, so a list of things reads as one
     table rather than a stack of cards. */
  --entry-list-gap:           var(--space-none);
  --entry-list-edge-width:    var(--border-width-strong);
  --entry-inset-block:        var(--space-inset-md);
  --entry-inset-inline:       var(--space-none);
  --entry-surface:            var(--surface-none);
  --entry-elevation:          var(--elevation-flat);
  --entry-radius:             var(--radius-surface);
  --entry-rule-width:         var(--border-width-hairline);

  /* 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-md);
  --pullquote-inset-inline:   var(--space-none);
  --pullquote-surface:        var(--surface-none);
  --pullquote-radius:         var(--radius-surface);
  --pullquote-rule-width:     var(--border-width-strong);

  /* The mode and theme triggers. Figma node 68:3440. Slate takes the square
     radius; the metrics are otherwise identical to Sand. */
  --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-size);
  --switcher-label-weight:   var(--type-control-weight);

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

  --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-slate-950);
    --surface-subtle:          var(--color-slate-900);
    --surface-raised:          var(--color-slate-900);
    --surface-sunken:          var(--color-slate-1000);
    --surface-inverse:         var(--color-slate-100);
    --surface-accent:          var(--color-blue-400);
    --surface-accent-hover:    var(--color-blue-300);
    --surface-accent-subtle:   var(--color-blue-900);
    --surface-critical-subtle: var(--color-red-900);
    --surface-positive-subtle: var(--color-green-900);
    --surface-scrim:           var(--color-scrim-dark);
    --surface-selection:       var(--color-highlight-blue-dk);
    --text-primary:            var(--color-slate-50);
    --text-secondary:          var(--color-slate-300);
    --text-muted:              var(--color-slate-400);
    --text-on-accent:          var(--color-slate-950);
    --text-on-inverse:         var(--color-slate-900);
    --text-accent:             var(--color-blue-300);
    --text-link:               var(--color-blue-300);
    --text-link-hover:         var(--color-blue-200);
    --text-critical:           var(--color-red-300);
    --text-positive:           var(--color-green-300);
    --text-selection:          var(--color-slate-50);
    --border-subtle:           var(--color-slate-800);
    --border-container:        var(--color-slate-700);
    --border-strong:           var(--color-slate-500);
    --border-interactive:      var(--color-slate-500);
    --border-accent:           var(--color-blue-400);
    --border-focus:            var(--color-blue-300);
    --border-critical:         var(--color-red-400);
    --divider-color:           var(--color-slate-800);
    --elevation-flat:          var(--shadow-dark-0);
    --elevation-raised:        var(--shadow-dark-1);
    --elevation-sticky:        var(--shadow-dark-2);
    --elevation-overlay:       var(--shadow-dark-4);
  }
}

:root[data-mode="dark"] {
  color-scheme:              dark;
  --surface-page:            var(--color-slate-950);
  --surface-subtle:          var(--color-slate-900);
  --surface-raised:          var(--color-slate-900);
  --surface-sunken:          var(--color-slate-1000);
  --surface-inverse:         var(--color-slate-100);
  --surface-accent:          var(--color-blue-400);
  --surface-accent-hover:    var(--color-blue-300);
  --surface-accent-subtle:   var(--color-blue-900);
  --surface-critical-subtle: var(--color-red-900);
  --surface-positive-subtle: var(--color-green-900);
  --surface-scrim:           var(--color-scrim-dark);
  --surface-selection:       var(--color-highlight-blue-dk);
  --text-primary:            var(--color-slate-50);
  --text-secondary:          var(--color-slate-300);
  --text-muted:              var(--color-slate-400);
  --text-on-accent:          var(--color-slate-950);
  --text-on-inverse:         var(--color-slate-900);
  --text-accent:             var(--color-blue-300);
  --text-link:               var(--color-blue-300);
  --text-link-hover:         var(--color-blue-200);
  --text-critical:           var(--color-red-300);
  --text-positive:           var(--color-green-300);
  --text-selection:          var(--color-slate-50);
  --border-subtle:           var(--color-slate-800);
  --border-container:        var(--color-slate-700);
  --border-strong:           var(--color-slate-500);
  --border-interactive:      var(--color-slate-500);
  --border-accent:           var(--color-blue-400);
  --border-focus:            var(--color-blue-300);
  --border-critical:         var(--color-red-400);
  --divider-color:           var(--color-slate-800);
  --elevation-flat:          var(--shadow-dark-0);
  --elevation-raised:        var(--shadow-dark-1);
  --elevation-sticky:        var(--shadow-dark-2);
  --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-accent:       var(--color-blue-800);
    --surface-accent-hover: var(--color-blue-900);
    --text-primary:         var(--color-slate-1000);
    --text-secondary:       var(--color-slate-900);
    --text-muted:           var(--color-slate-800);
    --text-accent:          var(--color-blue-800);
    --text-link:            var(--color-blue-800);
    --text-link-hover:      var(--color-blue-900);
    --text-critical:        var(--color-red-800);
    --text-positive:        var(--color-green-800);
    --border-subtle:        var(--color-slate-700);
    --border-container:     var(--color-slate-1000);
    --border-strong:        var(--color-slate-1000);
    --border-interactive:   var(--color-slate-1000);
    --border-accent:        var(--color-blue-800);
    --border-focus:         var(--color-blue-800);
    --border-critical:      var(--color-red-800);
    --divider-color:        var(--color-slate-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-none);
    --caption-inset-block:  var(--space-none);
    --caption-inset-inline: var(--space-none);
    --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-accent:       var(--color-blue-800);
  --surface-accent-hover: var(--color-blue-900);
  --text-primary:         var(--color-slate-1000);
  --text-secondary:       var(--color-slate-900);
  --text-muted:           var(--color-slate-800);
  --text-accent:          var(--color-blue-800);
  --text-link:            var(--color-blue-800);
  --text-link-hover:      var(--color-blue-900);
  --text-critical:        var(--color-red-800);
  --text-positive:        var(--color-green-800);
  --border-subtle:        var(--color-slate-700);
  --border-container:     var(--color-slate-1000);
  --border-strong:        var(--color-slate-1000);
  --border-interactive:   var(--color-slate-1000);
  --border-accent:        var(--color-blue-800);
  --border-focus:         var(--color-blue-800);
  --border-critical:      var(--color-red-800);
  --divider-color:        var(--color-slate-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-none);
  --caption-inset-block:  var(--space-none);
  --caption-inset-inline: var(--space-none);
  --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-slate-1000);
    --surface-subtle:          var(--color-slate-950);
    --surface-raised:          var(--color-slate-950);
    --surface-sunken:          var(--color-slate-1000);
    --surface-inverse:         var(--color-slate-0);
    --surface-accent:          var(--color-blue-200);
    --surface-accent-hover:    var(--color-blue-100);
    --surface-accent-subtle:   var(--color-slate-950);
    --surface-critical-subtle: var(--color-slate-950);
    --surface-positive-subtle: var(--color-slate-950);
    --surface-scrim:           var(--color-scrim-dark);
    --surface-selection:       var(--color-highlight-blue-dk);
    --text-primary:            var(--color-slate-0);
    --text-secondary:          var(--color-slate-0);
    --text-muted:              var(--color-slate-200);
    --text-on-accent:          var(--color-slate-1000);
    --text-on-inverse:         var(--color-slate-1000);
    --text-accent:             var(--color-blue-200);
    --text-link:               var(--color-blue-200);
    --text-link-hover:         var(--color-blue-100);
    --text-critical:           var(--color-red-200);
    --text-positive:           var(--color-green-200);
    --text-selection:          var(--color-slate-0);
    --border-subtle:           var(--color-slate-400);
    --border-container:        var(--color-slate-0);
    --border-strong:           var(--color-slate-0);
    --border-interactive:      var(--color-slate-0);
    --border-accent:           var(--color-blue-200);
    --border-focus:            var(--color-blue-200);
    --border-critical:         var(--color-red-200);
    --divider-color:           var(--color-slate-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-none);
    --caption-inset-block:     var(--space-none);
    --caption-inset-inline:    var(--space-none);
    --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-slate-1000);
  --surface-subtle:          var(--color-slate-950);
  --surface-raised:          var(--color-slate-950);
  --surface-sunken:          var(--color-slate-1000);
  --surface-inverse:         var(--color-slate-0);
  --surface-accent:          var(--color-blue-200);
  --surface-accent-hover:    var(--color-blue-100);
  --surface-accent-subtle:   var(--color-slate-950);
  --surface-critical-subtle: var(--color-slate-950);
  --surface-positive-subtle: var(--color-slate-950);
  --surface-scrim:           var(--color-scrim-dark);
  --surface-selection:       var(--color-highlight-blue-dk);
  --text-primary:            var(--color-slate-0);
  --text-secondary:          var(--color-slate-0);
  --text-muted:              var(--color-slate-200);
  --text-on-accent:          var(--color-slate-1000);
  --text-on-inverse:         var(--color-slate-1000);
  --text-accent:             var(--color-blue-200);
  --text-link:               var(--color-blue-200);
  --text-link-hover:         var(--color-blue-100);
  --text-critical:           var(--color-red-200);
  --text-positive:           var(--color-green-200);
  --text-selection:          var(--color-slate-0);
  --border-subtle:           var(--color-slate-400);
  --border-container:        var(--color-slate-0);
  --border-strong:           var(--color-slate-0);
  --border-interactive:      var(--color-slate-0);
  --border-accent:           var(--color-blue-200);
  --border-focus:            var(--color-blue-200);
  --border-critical:         var(--color-red-200);
  --divider-color:           var(--color-slate-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-none);
  --caption-inset-block:     var(--space-none);
  --caption-inset-inline:    var(--space-none);
  --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;
  }
}