/* Skarv Rock Light — design tokens (owner: frontend-claude)
   Colour system from CHARTER §2. Night is the default; Day via html[data-theme="light"]
   or prefers-color-scheme: light when no data-theme is set (no-JS path). */

@font-face { font-family: "Old Standard TT"; src: url("../fonts/old-standard-tt-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Old Standard TT"; src: url("../fonts/old-standard-tt-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Old Standard TT"; src: url("../fonts/old-standard-tt-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("../fonts/courier-prime-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("../fonts/courier-prime-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
/* metric-matched fallbacks so the swap does not shift layout (ratios measured in Chromium) */
@font-face { font-family: "Old Standard Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 99.5%; ascent-override: 76%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Courier Fallback"; src: local("Courier New"), local("Courier"); size-adjust: 99.9%; }

:root {
  /* ---- Night (default) ---- */
  --ink: #07101c;
  --sea: #0e2238;
  --foam: #e9eef3;
  --mist: #9fb0c2;
  --brass: #d9a441;
  --signal: #e2473b;
  --kelp: #2f6b5e;
  --brass-ink: #d9a441; /* brass for TEXT: AA on page and sea in both themes */
  /* derived surfaces (same hue family, never used for text) */
  --ink-2: #0a1726;
  --line: rgba(233, 238, 243, 0.14);
  --line-strong: rgba(233, 238, 243, 0.28);
  --glow: rgba(217, 164, 65, 0.55);
  --shadow: rgba(0, 0, 0, 0.55);
  --scrim: rgba(7, 16, 28, 0.72);
  color-scheme: dark;

  /* ---- Type ---- */
  --font-display: "Old Standard TT", "Old Standard Fallback", Georgia, "Times New Roman", serif;
  --font-mono: "Courier Prime", "Courier Fallback", "Courier New", Courier, monospace;
  --fs-xs: clamp(0.8rem, 0.76rem + 0.2vw, 0.9rem);
  --fs-sm: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  --fs-md: clamp(1.12rem, 1.04rem + 0.35vw, 1.3rem);
  --fs-lg: clamp(1.35rem, 1.2rem + 0.7vw, 1.85rem);
  --fs-xl: clamp(2rem, 1.5rem + 2.2vw, 3.5rem);
  --fs-2xl: clamp(2.6rem, 1.7rem + 4.4vw, 5.4rem);
  --fs-hero: clamp(2.9rem, 1.2rem + 8.2vw, 8rem);
  --lh-tight: 0.98;
  --lh-snug: 1.15;
  --lh-body: 1.55;
  --track-mono: 0.08em;
  --track-display: -0.02em;

  /* ---- Space (8-pt scale) ---- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --measure: 72rem;
  --measure-text: 38rem;
  --header-h: 4.25rem;

  /* ---- Shape & motion ---- */
  --radius: 0;
  --radius-lg: 10px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-swell: cubic-bezier(0.37, 0, 0.63, 1);
  --t-fast: 160ms;
  --t-med: 360ms;
  --t-slow: 900ms;

  /* ---- Layers ---- */
  --z-storm: 1;
  --z-content: 2;
  --z-header: 10;
  --z-skip: 100;

  /* ---- JS-written properties (defaults so CSS is valid before scripts run) ---- */
  --storm: 0;
  --scroll: 0;
}

html[data-theme="light"] {
  --ink: #f3efe6;
  --sea: #d7e3ec;
  --foam: #14202b;
  --mist: #3a4858;
  --brass: #9a6b12;
  --signal: #b93327;
  --kelp: #2f6b5e;
  --brass-ink: #7d5710;
  --ink-2: #ebe5d9;
  --line: rgba(20, 32, 43, 0.14);
  --line-strong: rgba(20, 32, 43, 0.3);
  --glow: rgba(154, 107, 18, 0.45);
  --shadow: rgba(20, 32, 43, 0.18);
  --scrim: rgba(243, 239, 230, 0.78);
  color-scheme: light;
}

/* No-JS visitors with a light OS preference get the Day palette too. */
@media (prefers-color-scheme: light) {
  html:not([data-theme]) {
    --ink: #f3efe6;
    --sea: #d7e3ec;
    --foam: #14202b;
    --mist: #3a4858;
    --brass: #9a6b12;
    --signal: #b93327;
    --kelp: #2f6b5e;
    --brass-ink: #7d5710;
    --ink-2: #ebe5d9;
    --line: rgba(20, 32, 43, 0.14);
    --line-strong: rgba(20, 32, 43, 0.3);
    --glow: rgba(154, 107, 18, 0.45);
    --shadow: rgba(20, 32, 43, 0.18);
    --scrim: rgba(243, 239, 230, 0.78);
    color-scheme: light;
  }
}