/* Ship O'Clock — design tokens for the website (shipoclock.com).
   Source of truth: tokens.json. Keep the two in sync in the same commit.
   Light is the default; dark follows the OS, or data-theme="dark" / "light" to force. */

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/Fraunces-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* brand constants (do not theme) */
  --soc-harbour-green: #1F7A5C;
  --soc-harbour-green-deep: #155A45;
  --soc-harbour-green-bright: #2C8F6C;
  --soc-whitewash: #F5F2EA;
  --soc-ink: #17262B;
  --soc-brass: #C9962B;
  --soc-brass-light: #E7C265;
  --soc-brass-deep: #A9771C;
  --soc-night-harbour: #10201D;
  --soc-hull-red: #C9483A;

  /* semantic — light */
  --bg: #F5F2EA;
  --surface: #FFFFFF;
  --surface-glass: rgba(255,255,255,0.72);
  --surface-sunken: #ECE7DA;
  --line: rgba(23,38,43,0.12);
  --text: #17262B;
  --text-muted: #5C6B70;
  --text-on-accent: #FFFFFF;
  --accent: #1F7A5C;
  --accent-pressed: #175F48;
  --accent-soft: rgba(31,122,92,0.12);
  --accent-alt: #A67A1E;
  --accent-alt-soft: rgba(201,150,43,0.16);

  --ship-cargo: #C9483A;
  --ship-tanker: #7A56A8;
  --ship-passenger: #2F64C9;
  --ship-ferry: #1F7A5C;
  --ship-tug: #A8741C;
  --ship-fishing: #2E8FA3;
  --ship-pleasure: #C8619A;
  --ship-other: #6F7F85;

  --tide: #3A7FC4;
  --tide-soft: rgba(58,127,196,0.14);
  --wind: #5F8FA8;
  --wind-soft: rgba(95,143,168,0.14);
  --weather: #D9A33A;
  --weather-soft: rgba(217,163,58,0.16);
  --success: #1F7A5C;
  --warn: #B8741A;
  --danger: #C4372B;

  --map-water: #CFE3DA;
  --map-land: #EDE8DB;
  --map-land-alt: #E4DECF;
  --map-road: rgba(23,38,43,0.08);
  --map-label: rgba(23,38,43,0.62);
  --map-pin: #C9962B;
  --map-pin-halo: rgba(31,122,92,0.18);
  --map-pass-line: #A67A1E;

  --shadow-sm: 0 1px 2px rgba(23,38,43,0.08);
  --shadow-md: 0 4px 12px rgba(23,38,43,0.10);
  --shadow-lg: 0 12px 32px rgba(23,38,43,0.14);
  --shadow-glass: 0 8px 24px rgba(23,38,43,0.10), inset 0 1px 0 rgba(255,255,255,0.6);

  /* typography */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-display-variation: "SOFT" 70, "WONK" 0;
  --font-text: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-time: ui-rounded, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --type-hero: 600 56px/60px var(--font-time);
  --type-time-lg: 600 34px/38px var(--font-time);
  --type-time-md: 600 22px/26px var(--font-time);
  --type-time-sm: 600 15px/18px var(--font-time);
  --type-display: 600 40px/44px var(--font-display);
  --type-title1: 700 28px/34px var(--font-text);
  --type-title2: 600 22px/28px var(--font-text);
  --type-title3: 600 20px/25px var(--font-text);
  --type-headline: 600 17px/22px var(--font-text);
  --type-body: 400 17px/22px var(--font-text);
  --type-callout: 400 16px/21px var(--font-text);
  --type-subhead: 400 15px/20px var(--font-text);
  --type-footnote: 400 13px/18px var(--font-text);
  --type-caption: 500 12px/16px var(--font-text);
  --type-eyebrow: 600 11px/13px var(--font-text);
  --tracking-eyebrow: 0.06em;

  /* spacing (px) */
  --space-1: 2px;  --space-2: 4px;  --space-3: 8px;  --space-4: 12px;
  --space-5: 16px; --space-6: 20px; --space-7: 24px; --space-8: 32px;
  --space-9: 40px; --space-10: 48px; --space-11: 64px;

  /* radii */
  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px;
  --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px;

  /* glass + motion */
  --blur-glass: 20px;
  --blur-sheet: 30px;
  --motion-fast: 160ms;
  --motion-base: 240ms;
  --motion-slow: 360ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* dark — follows the OS unless the page forces light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #10201D;
    --surface: #18302B;
    --surface-glass: rgba(24,48,43,0.72);
    --surface-sunken: #0B1715;
    --line: rgba(240,238,230,0.12);
    --text: #F0EEE6;
    --text-muted: #9FB0AA;
    --text-on-accent: #0B1715;
    --accent: #4CC08E;
    --accent-pressed: #3AA97A;
    --accent-soft: rgba(76,192,142,0.16);
    --accent-alt: #E3B856;
    --accent-alt-soft: rgba(227,184,86,0.18);

    --ship-cargo: #E5695A;
    --ship-tanker: #A98BD6;
    --ship-passenger: #6C9BF0;
    --ship-ferry: #4CC08E;
    --ship-tug: #D9A24A;
    --ship-fishing: #5FB8CB;
    --ship-pleasure: #E58BBB;
    --ship-other: #9AA9AE;

    --tide: #6EA8E6;
    --tide-soft: rgba(110,168,230,0.18);
    --wind: #8FB4C8;
    --wind-soft: rgba(143,180,200,0.18);
    --weather: #E8BC5A;
    --weather-soft: rgba(232,188,90,0.18);
    --success: #4CC08E;
    --warn: #D9A24A;
    --danger: #E86A5C;

    --map-water: #0C1A17;
    --map-land: #1B2925;
    --map-land-alt: #22332E;
    --map-road: rgba(240,238,230,0.07);
    --map-label: rgba(240,238,230,0.62);
    --map-pin: #E3B856;
    --map-pin-halo: rgba(76,192,142,0.22);
    --map-pass-line: #E3B856;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.35);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.45);
    --shadow-glass: 0 8px 24px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.08);
  }
}

/* forced dark (same block; keep identical to the media query above) */
:root[data-theme="dark"] {
  --bg: #10201D;
  --surface: #18302B;
  --surface-glass: rgba(24,48,43,0.72);
  --surface-sunken: #0B1715;
  --line: rgba(240,238,230,0.12);
  --text: #F0EEE6;
  --text-muted: #9FB0AA;
  --text-on-accent: #0B1715;
  --accent: #4CC08E;
  --accent-pressed: #3AA97A;
  --accent-soft: rgba(76,192,142,0.16);
  --accent-alt: #E3B856;
  --accent-alt-soft: rgba(227,184,86,0.18);
  --ship-cargo: #E5695A;
  --ship-tanker: #A98BD6;
  --ship-passenger: #6C9BF0;
  --ship-ferry: #4CC08E;
  --ship-tug: #D9A24A;
  --ship-fishing: #5FB8CB;
  --ship-pleasure: #E58BBB;
  --ship-other: #9AA9AE;
  --tide: #6EA8E6;
  --tide-soft: rgba(110,168,230,0.18);
  --wind: #8FB4C8;
  --wind-soft: rgba(143,180,200,0.18);
  --weather: #E8BC5A;
  --weather-soft: rgba(232,188,90,0.18);
  --success: #4CC08E;
  --warn: #D9A24A;
  --danger: #E86A5C;
  --map-water: #0C1A17;
  --map-land: #1B2925;
  --map-land-alt: #22332E;
  --map-road: rgba(240,238,230,0.07);
  --map-label: rgba(240,238,230,0.62);
  --map-pin: #E3B856;
  --map-pin-halo: rgba(76,192,142,0.22);
  --map-pass-line: #E3B856;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.45);
  --shadow-glass: 0 8px 24px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.08);
}

/* base */
html { background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--type-body);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
.display, h1.display { font: var(--type-display); font-variation-settings: var(--font-display-variation); letter-spacing: -0.01em; }
.time { font: var(--type-time-lg); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.eyebrow { font: var(--type-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.glass {
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.3);
  backdrop-filter: blur(var(--blur-glass)) saturate(1.3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
}
@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; }
}