/* =============================================================================
 * reset.css — reset + the frozen design tokens (D1 / D2 / A1)
 * Nothing but tokens and normalization lives here.
 * ============================================================================= */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  font-family: var(--font-sans);
  line-height: 1.6;
  color: var(--whale-white);
  background: var(--abyss);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, canvas { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
:where(h1,h2,h3,h4) { text-wrap: balance; }
:where(p) { text-wrap: pretty; }

/* ============================================================ DESIGN TOKENS */
:root {
  /* --- depth-zone grounds (stacked static layers; cross-faded by opacity) */
  --surface-1: #12405f;
  --surface-2: #0a2a43;
  --twilight:  #071d2f;
  --midnight:  #04121f;
  --abyss:     #020a12;
  --hadal:     #02040a;

  /* --- ink & accents */
  --ink:          #05080b;
  --whale-white:  #f4f8fb;
  --whale-dim:    #a9bccb;
  --whale-faint:  #6d8496;
  --current:      #39e0d0;   /* bioluminescent cyan — spent sparingly */
  --seed-halo:    rgba(2, 6, 12, 0.85);
  --kelp-amber:   #e6b45c;
  --rust:         #c65b3c;
  /* The kinship current: a WARM channel, deliberately outside the cool Western
   * stance scale. Never at its +1.0 pole — beside it, coeval. (E3, blocking.) */
  --kinship:      #c9a86b;

  /* --- lane encodings: colour is ALWAYS paired with shape (never colour alone) */
  --lane-science:      #39e0d0;
  --lane-culture:      #e6b45c;
  --lane-exploitation: #c65b3c;
  --lane-captivity:    #9a86d6;
  --lane-conservation: #5fbf8f;

  /* --- surfaces */
  --surface-drawer: #0a1622;
  --surface-panel:  rgba(6, 16, 26, 0.92);
  --inset-bg:       rgba(2, 10, 18, 0.5);   /* readout + search well */
  --hairline:       rgba(160, 200, 220, 0.16);
  --hairline-soft:  rgba(160, 200, 220, 0.08);

  /* --- typography */
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono:  ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --step-0:  clamp(0.95rem, 0.92rem + 0.2vw, 1.05rem);
  --step-1:  clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --step-2:  clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
  --step-3:  clamp(1.8rem, 1.4rem + 2vw, 2.8rem);
  --step-4:  clamp(2.3rem, 1.6rem + 3.6vw, 4.4rem);
  --step-5:  clamp(2.8rem, 1.7rem + 5.5vw, 6rem);

  --measure: 64ch;

  /* --- FROZEN MOTION TOKEN TABLE (D2). No animation may hardcode a value. */
  --dur-bloom-in:   120ms;
  --dur-bloom-out:  520ms;
  --ease-bloom:     cubic-bezier(0.16, 1, 0.3, 1);
  --dur-drawer:     320ms;
  --ease-unfold:    cubic-bezier(0.22, 1, 0.36, 1);
  --stagger-content: 32ms;
  --dur-lens:       400ms;
  --dur-ascent:     1400ms;
  --dur-reveal:     260ms;
  --dwell-tour:     3800ms;
  --hover-intent:   100ms;
  --dur-zonefade:   700ms;    /* zone-layer opacity cross-fade */
  --dur-pulse:      7s;       /* marquee tidal pulse — 0.14Hz, under 1Hz */
  --dur-cue:        2600ms;   /* overture scroll-cue drift */
  --dur-hover-tint: 160ms;    /* HUD button colour tint on hover */
  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);

  /* --- layout */
  --hud-w: 264px;
  --gauge-w: 56px;
  --z-bg: 0;
  --z-snow: 1;
  --z-silhouette: 2;
  --z-nodes: 3;
  --z-haze: 4;
  --z-hud: 20;
  --z-card: 30;
  --z-scrim: 40;
  --z-drawer: 50;

  /* Focused seeds must never hide behind the persistent chrome (WCAG 2.4.11) */
  scroll-padding-top: 96px;
  scroll-padding-bottom: 120px;
}

/* ---------------------------------------------------------- light theme
 * A "field guide" mode. Both directions must win: the OS signal is the
 * default, and an explicit data-theme on <html> overrides it either way.
 * ------------------------------------------------------------------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --surface-1: #dcecf2; --surface-2: #c4dde8; --twilight: #a9cbdb;
    --midnight:  #8fb8cc; --abyss:     #7aa7bf; --hadal:    #6b98b2;
    --whale-white: #08131c; --whale-dim: #33505f; --whale-faint: #5a7484;
    --current: #0d7a70; --kelp-amber: #8a5a12; --rust: #9e3d22;
    --lane-science: #0d7a70; --lane-culture: #8a5a12; --lane-exploitation: #9e3d22;
    --lane-captivity: #55429b; --lane-conservation: #1f6f4a;
    --seed-halo: rgba(255, 255, 255, 0.9);
    --kinship: #7a5c1a;
    --surface-drawer: #f2f8fb; --surface-panel: rgba(244, 250, 252, 0.94);
    --inset-bg: rgba(255, 255, 255, 0.72);
    --hairline: rgba(10, 40, 60, 0.2); --hairline-soft: rgba(10, 40, 60, 0.1);
  }
}
:root[data-theme="light"] {
  --surface-1: #dcecf2; --surface-2: #c4dde8; --twilight: #a9cbdb;
  --midnight:  #8fb8cc; --abyss:     #7aa7bf; --hadal:    #6b98b2;
  --whale-white: #08131c; --whale-dim: #33505f; --whale-faint: #5a7484;
  --current: #0d7a70; --kelp-amber: #8a5a12; --rust: #9e3d22;
  --lane-science: #0d7a70; --lane-culture: #8a5a12; --lane-exploitation: #9e3d22;
  --lane-captivity: #55429b; --lane-conservation: #1f6f4a;
  --seed-halo: rgba(255, 255, 255, 0.9);
  --kinship: #7a5c1a;
  --surface-drawer: #f2f8fb; --surface-panel: rgba(244, 250, 252, 0.94);
  --inset-bg: rgba(255, 255, 255, 0.72);
  --hairline: rgba(10, 40, 60, 0.2); --hairline-soft: rgba(10, 40, 60, 0.1);
}

/* ------------------------------------------------------------ focus ring
 * Two-tone so that ONE of the two tones always clears 3:1 against whatever the
 * seed is sitting on, from surface-teal to hadal-black (WCAG 1.4.11).
 *
 * The anchor must be the OPPOSITE polarity to the accent, in both themes. It
 * cannot reuse --seed-halo: in light theme that token is white (it is the
 * glyph's figure-ground stroke against a pale column), which left the ring
 * light-on-light — teal 2.3:1, white halo 2.0:1, neither conforming, on every
 * light-theme node in the deep half of the column.
 * ------------------------------------------------------------------- */
:root { --focus-anchor: rgba(2, 6, 12, 0.92); }        /* dark, under a cyan accent */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --focus-anchor: #04121f; }  /* dark, under a teal accent */
}
:root[data-theme="light"] { --focus-anchor: #04121f; }

:focus-visible {
  outline: 2px solid var(--current);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--focus-anchor);
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

/* Windows High Contrast / forced-colors: system colours only. */
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid Highlight; box-shadow: none; }
  .seed-glyph path { fill: CanvasText; stroke: Canvas; }
}

/* -------------------------------------------------------------- utilities */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -110%);
  z-index: 100;
  background: var(--surface-drawer);
  color: var(--whale-white);
  padding: 0.7rem 1.2rem;
  border: 1px solid var(--current);
  border-radius: 0 0 6px 6px;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* Foreign-language spans get a hairline underline so the reader can see that
 * a word belongs to another language, and screen readers get the lang switch. */
.foreign { font-style: italic; }
.binomial { font-style: italic; }

@media print {
  body { background: #fff; color: #000; }
}