/* =============================================================
   AquaTrails — Colors & Type
   Single source of truth for tokens. Import this in every page.
   ============================================================= */

/* Fonts: Google Fonts CDN.
   - Newsreader: editorial display serif (16-72, italic available)
   - DM Sans:    body / UI sans
   - JetBrains Mono: instrument/data
   If you self-host, replace these @import lines with @font-face
   blocks pointing at /fonts/*.woff2 — token names below stay the same. */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,300;1,6..72,400;1,6..72,500&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Color: Depth (cool near-black, navy backbone) ---------- */
  --depth-50:  #EAF1F6;
  --depth-100: #C9D7E2;
  --depth-200: #9FB6C7;
  --depth-300: #6E8FA8;
  --depth-400: #426E8A;
  --depth-500: #2A5775;
  --depth-600: #1B4360;
  --depth-700: #163750;
  --depth-800: #0F2A3F;  /* signature depth */
  --depth-900: #0A2236;
  --depth-950: #051726;

  /* ---------- Color: Current (primary action — moving water) ---------- */
  --current-50:  #EFF5FF;
  --current-100: #DBE8FE;
  --current-200: #BED5FD;
  --current-300: #93BAFB;
  --current-400: #6094F7;
  --current-500: #3B82F6;
  --current-600: #2563EB;  /* default action */
  --current-700: #1D4FCF;
  --current-800: #1E429F;
  --current-900: #1E3A82;

  /* ---------- Color: Spray (cyan accent, freshness) ---------- */
  --spray-50:  #ECFEFF;
  --spray-100: #CFFAFE;
  --spray-200: #A5F3FC;
  --spray-300: #67E8F4;
  --spray-400: #38BDD8;
  --spray-500: #22D3EE;  /* signature spray */
  --spray-600: #06B6D4;
  --spray-700: #0891B2;
  --spray-800: #0E7490;
  --spray-900: #155E75;

  /* ---------- Color: Sunrise (the only warm; signal/celebrate) ---------- */
  --sunrise-50:  #FFF7EB;
  --sunrise-100: #FFEAC9;
  --sunrise-200: #FFDFAA;
  --sunrise-300: #FFC97A;
  --sunrise-400: #FFB347;  /* signature sunrise */
  --sunrise-500: #F09826;
  --sunrise-600: #D97D14;
  --sunrise-700: #B8620C;
  --sunrise-800: #8C480A;
  --sunrise-900: #6E3808;

  /* ---------- Neutrals: Sand (paper, warm-tinted) ---------- */
  --sand-50:  #FBF6EC;  /* default light bg — NOT pure white */
  --sand-100: #F5EEDE;
  --sand-200: #EBDFC4;
  --sand-300: #D6C39E;
  --sand-400: #BFAA80;

  /* ---------- Neutrals: Stone (warm dark text/surfaces) ---------- */
  --stone-500: #6E6452;
  --stone-600: #564E40;
  --stone-700: #4A4438;
  --stone-800: #2E2A22;
  --stone-900: #1F1B14;

  /* ---------- Semantic: Activity Safety Score ---------- */
  --safe:     #2DA67A;   /* score 80-100 — pristine/great */
  --safe-bg:  #E0F4EC;
  --moderate: #F0B33B;   /* score 60-79 — fair */
  --moderate-bg: #FCF1D6;
  --caution:  #E8754A;   /* score 40-59 — caution */
  --caution-bg: #FBE2D5;
  --danger:   #D9434A;   /* score < 40 / hazard */
  --danger-bg: #FADADC;

  /* ---------- Semantic role aliases (light mode default) ---------- */
  --bg:           var(--sand-50);
  --bg-elevated:  #FFFFFF;
  --bg-sunken:    var(--sand-100);
  --bg-inverse:   var(--depth-900);

  --fg:        var(--depth-900);   /* primary text */
  --fg-muted:  var(--depth-500);   /* secondary text */
  --fg-faint:  var(--depth-300);   /* tertiary / placeholders */
  --fg-on-dark: #FBF6EC;
  --fg-on-accent: #FFFFFF;

  --border:        var(--depth-100);
  --border-strong: var(--depth-200);
  --border-faint:  rgba(15, 42, 63, 0.08);

  --accent:        var(--current-600);  /* default action */
  --accent-hover:  var(--current-700);
  --accent-fg:     #FFFFFF;
  --highlight:     var(--spray-500);    /* data-viz, freshness */
  --signal:        var(--sunrise-400);  /* the special-occasion warm */

  /* ---------- Spacing scale (4px base) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ---------- Radii ---------- */
  --r-0:    0;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-full: 9999px;

  /* ---------- Shadows ---------- */
  --shadow-sm:   0 1px 2px rgba(15,42,63,0.06), 0 1px 3px rgba(15,42,63,0.04);
  --shadow-md:   0 2px 4px rgba(15,42,63,0.06), 0 8px 24px rgba(15,42,63,0.08);
  --shadow-lg:   0 4px 8px rgba(15,42,63,0.08), 0 24px 48px rgba(15,42,63,0.12);
  --shadow-deep: 0 8px 16px rgba(5,23,38,0.20), 0 40px 80px rgba(5,23,38,0.32);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6);

  /* ---------- Motion ---------- */
  --ease-current: cubic-bezier(0.32, 0.72, 0, 1);   /* signature */
  --ease-quick:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-quick: 150ms;
  --dur-base:  220ms;
  --dur-slow:  400ms;
  --dur-data:  700ms;

  /* ---------- Type families ---------- */
  --font-display: "Newsreader", "Source Serif Pro", Georgia, serif;
  --font-sans:    "DM Sans", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* ---------- Type scale (semantic) ---------- */
  --t-display: 700 64px/1.02 var(--font-display);   /* hero */
  --t-h1:      600 44px/1.08 var(--font-display);
  --t-h2:      600 32px/1.15 var(--font-display);
  --t-h3:      600 24px/1.25 var(--font-display);
  --t-h4:      600 18px/1.35 var(--font-sans);
  --t-h5:      600 14px/1.4  var(--font-sans);

  --t-body-lg: 400 18px/1.5 var(--font-sans);
  --t-body:    400 15px/1.55 var(--font-sans);
  --t-body-sm: 400 13px/1.5 var(--font-sans);
  --t-caption: 400 12px/1.4 var(--font-sans);

  /* Eyebrow / instrument label — the tracked uppercase motif */
  --t-eyebrow: 500 11px/1.2 var(--font-sans);
  --eyebrow-tracking: 0.16em;

  /* Mono for data */
  --t-mono-lg: 500 24px/1.2 var(--font-mono);
  --t-mono:    500 14px/1.4 var(--font-mono);
  --t-mono-sm: 500 11px/1.4 var(--font-mono);

  /* Display numerals (gauge readings — Newsreader gives them gravity) */
  --t-numeral: 500 56px/1.0 var(--font-display);
  --t-numeral-sm: 500 32px/1.0 var(--font-display);
}

/* ---------- Dark mode (depth-first) ---------- */
[data-theme="dark"], .at-dark {
  --bg:           var(--depth-900);
  --bg-elevated:  var(--depth-800);
  --bg-sunken:    var(--depth-950);
  --bg-inverse:   var(--sand-50);

  --fg:        var(--sand-50);
  --fg-muted:  var(--depth-200);
  --fg-faint:  var(--depth-400);
  --fg-on-dark: var(--sand-50);
  --fg-on-accent: #FFFFFF;

  --border:        rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.18);
  --border-faint:  rgba(255,255,255,0.06);

  --accent:        var(--current-500);
  --accent-hover:  var(--current-400);

  --shadow-sm:   0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:   0 12px 32px rgba(0,0,0,0.5);
}

/* ---------- Element defaults ---------- */
html, body {
  background: var(--bg);
  color: var(--fg);
  font: var(--t-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1 { font: var(--t-h1); margin: 0; letter-spacing: -0.01em; }
h2 { font: var(--t-h2); margin: 0; letter-spacing: -0.005em; }
h3 { font: var(--t-h3); margin: 0; }
h4 { font: var(--t-h4); margin: 0; }
h5 { font: var(--t-h5); margin: 0; }
p  { font: var(--t-body); margin: 0; text-wrap: pretty; }

code, pre, .mono { font-family: var(--font-mono); }

.at-eyebrow {
  font: var(--t-eyebrow);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.at-display { font: var(--t-display); letter-spacing: -0.02em; }
.at-numeral { font: var(--t-numeral); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* Selection */
::selection { background: var(--current-200); color: var(--depth-900); }
[data-theme="dark"] ::selection { background: var(--current-700); color: var(--sand-50); }

/* Focus ring (use everywhere) */
.at-focus-ring:focus-visible,
button:focus-visible, a:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--current-500);
  outline-offset: 2px;
  border-radius: var(--r-md);
}