/* ==========================================================================
   Elpris · Tidevand — design tokens. THE ONLY file allowed to hold raw
   colours, lengths, font sizes, radii and durations (web/tools/lint-tokens.sh).
   Day colours measured from docs/pitch/p1d.png with Pillow; see DESIGN.md.
   Night = system dark (ECDIS-style night chart); [data-theme] forces a scheme.
   ========================================================================== */

/* ---- Fonts (self-hosted, OFL; see fonts/LICENSE.md) ----------------------- */
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("../fonts/source-serif-4-roman.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url("../fonts/source-serif-4-italic.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/public-sans.woff2") format("woff2"); }

:root {
  color-scheme: light dark;

  /* ---- Colour roles (day, night) ------------------------------------------ */
  --c-paper:     light-dark(#EFF5F5, #0B1824);  /* chart paper (cool, not cream) */
  --c-field:     light-dark(#FAFCFC, #0F2030);  /* input well */
  --c-ink:       light-dark(#102C3E, #DCE8EC);  /* chart navy ink: text, curve, rules, selected */
  --c-on-ink:    light-dark(#EFF5F5, #0B1824);  /* text on ink fills */
  --c-ink-2:     light-dark(#52636F, #9FB3BF);  /* secondary text */
  --c-rule:      light-dark(#102C3E, #DCE8EC);  /* header + table rules */
  --c-rule-soft: light-dark(#102C3E40, #DCE8EC40); /* rules between body rows */
  --c-line-ctl:  light-dark(#6F8794, #7D95A3);  /* control borders, ≥3:1 */
  --c-hover:     light-dark(#102C3E14, #DCE8EC1F);

  --c-depth-1:   light-dark(#C3E2ED, #173447);  /* water, upper band */
  --c-depth-2:   light-dark(#A0CEE0, #1F4A63);  /* water, middle band */
  --c-depth-3:   light-dark(#6FADCB, #2A6584);  /* water, bottom band */
  --c-past:      light-dark(#EFF5F580, #0B182480); /* veil over elapsed water */

  --c-now:       light-dark(#A22670, #F07DBE);  /* chart magenta: NOW only */
  --c-low:       light-dark(#2A7352, #5FC79A);  /* low-water hatch stroke: LOW WATER only */
  --c-low-fill:  light-dark(#A8D8C6, #1D4D3C);  /* low-water hatch ground */
  --c-danger:    light-dark(#B3261E, #FF8A7A);
  --c-warn:      light-dark(#8A5300, #F2B85B);
  --c-focus:     light-dark(#102C3E, #DCE8EC);
  --c-skeleton:  light-dark(#102C3E14, #DCE8EC1A);

  /* ---- Pull cord: a hand lead-line (the one physical object; see DESIGN.md) -------
     Material mid-tones work on both papers; silhouettes (line groove, lead rim) are ≥3:1. */
  --c-cord-line:      light-dark(#5E4A2E, #8A7552);  /* laid hemp, groove + silhouette; 7.6:1 · 4.1:1 */
  --c-cord-strand:    light-dark(#A88B5C, #C9AF80);  /* hemp strands catching the light */
  --c-cord-leather:   light-dark(#6B3F24, #9A6440);  /* 2-fathom leather mark */
  --c-cord-lead-lit:  light-dark(#A3AEB5, #AEBAC1);  /* sounding lead, lit face */
  --c-cord-lead:      light-dark(#6E7B84, #7F8D96);  /* front face; 3.9:1 · 5.3:1 */
  --c-cord-lead-dark: light-dark(#4A555D, #56636B);  /* shaded face */
  --c-cord-shine:     light-dark(#E4EAED, #E4EAED);  /* specular edge */
  --c-cord-rim:       light-dark(#2E383F, #B4C0C6);  /* casting edge; 10.9:1 · 9.7:1 */
  --c-cord-metal:     light-dark(#8D989F, #5F6D76);  /* galvanised housing */
  --c-cord-metal-lit: light-dark(#C7D0D5, #8C9AA2);
  --c-cord-shadow:    light-dark(#102C3E47, #0000008C); /* cast on the paper */
  --cord-shadow: 2px 6px 3px var(--c-cord-shadow);

  /* ---- Type ------------------------------------------------------------------ */
  --font-serif: "Source Serif 4", "Source Serif Pro", Charter, "Iowan Old Style", Georgia, serif;
  --font-sans:  "Public Sans", "Segoe UI", "Helvetica Neue", sans-serif;
  --font-mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --t-verdict:  clamp(1.875rem, 1.35rem + 1.6vw, 2.5rem);   /* 30 → 40 */
  --t-sounding: clamp(1.875rem, 1.6rem + 0.8vw, 2.25rem);   /* 30 → 36 */
  --t-brand:    clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);     /* 28 → 40 */
  --t-zone:     clamp(1.25rem, 1rem + 0.9vw, 1.75rem);      /* 20 → 28 */
  --t-title:    clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);     /* sub-page titles */
  --t-heading:  clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --t-row:      clamp(1.0625rem, 0.95rem + 0.45vw, 1.375rem); /* tide-table rows 17 → 22 */
  --t-axis:     0.9375rem;                                   /* 15, italic serif */
  --t-body:     1rem;
  --t-small:    0.875rem;

  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.55;
  --track-verdict: -0.012em;
  --underline-offset: 0.18em;
  --underline-thick: 0.08em;
  --w-serif: 600;
  --w-serif-light: 400;
  --w-sans: 400;
  --w-sans-strong: 700;
  --opsz-display: 36;

  /* ---- Space (4pt) ------------------------------------------------------------ */
  --s-1: 0.25rem;  /*  4 */
  --s-2: 0.5rem;   /*  8 */
  --s-3: 0.75rem;  /* 12 */
  --s-4: 1rem;     /* 16 */
  --s-5: 1.5rem;   /* 24 */
  --s-6: 2rem;     /* 32 */
  --s-7: 3rem;     /* 48 */
  --s-8: 4rem;     /* 64 */
  --s-9: 6rem;     /* 96 */
  --page-pad: clamp(1rem, 0.4rem + 2.4vw, 2rem);

  /* ---- Sizes -------------------------------------------------------------------- */
  --hair: 1px;
  --rule: 1.5px;
  --rule-strong: 2px;
  --focus-ring: 3px;
  --focus-offset: 2px;
  --target: 2.75rem;            /* 44px */
  --w-page: 88rem;
  --w-prose: 42rem;
  --chart-h: clamp(15rem, 40vh, 25rem);
  --map-h: clamp(3.25rem, 2.6rem + 2vw, 4.5rem);
  --mark: 0.75rem;              /* notice mark */
  --key-w: 1em;                 /* tide-table key (hatch / ▲) */
  --key-h: 0.75em;
  --stepper-value-w: 7.5em;
  --frame-w: 24.375rem;         /* states gallery: 390 × 844 */
  --frame-h: 52.75rem;
  --frame-w-wide: 90rem;        /* 1440 × 900 */
  --frame-h-wide: 56.25rem;

  /* ---- Radii --------------------------------------------------------------------- */
  --r-ctl: 2px;                 /* square-cornered controls; there is no pill */

  /* ---- Motion (2 curves, 2 durations) ------------------------------------------- */
  --ease-tide: cubic-bezier(0.33, 0, 0.15, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 160ms;
  --dur-rise: 1100ms;
  --wipe-solid: #000;           /* mask opacity only, never painted */
  --wipe-core: 0.667;            /* fraction of the wipe radius that is fully lit; the rest is the soft edge */
  --dur-wipe: 650ms;            /* theme wipe from the pull cord */
}

@property --wipe-r { syntax: "<length>"; inherits: true; initial-value: 0px; }

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-rise: 0ms; --dur-wipe: 0ms; }
}