/* ============================================================
   De Slimme Brug — Colors & Type
   Design tokens. Use the semantic vars for components.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@600;700&family=JetBrains+Mono:wght@500&display=swap');

:root {
  /* Force light rendering on every browser. Without this, Android Chrome's
     Auto Dark Mode and iOS Safari's dark-mode form/background inversions
     can shift our navy/cyan/paper palette on mobile. Desktop is unaffected. */
  color-scheme: light;

  /* ── Brand colors ─────────────────────────────────── */
  /* Deep navy: the structural, trustworthy core. Used for primary surfaces, headlines, buttons. */
  --dsb-navy-900: #061829;        /* deepest — backgrounds for hero, dark mode root */
  --dsb-navy-800: #0A2540;        /* primary brand navy */
  --dsb-navy-700: #143A5B;
  --dsb-navy-600: #1E5380;
  --dsb-navy-500: #2E72A8;

  /* Electric cyan: the "pulse" — data, signal, live state. Use sparingly. */
  --dsb-cyan-500: #00B8D9;        /* primary accent */
  --dsb-cyan-400: #36CFEA;
  --dsb-cyan-300: #7FE0F2;
  --dsb-cyan-200: #B8EEF7;
  --dsb-cyan-100: #E1F7FB;

  /* Warm slate neutrals (paper-feel, not cold gray) */
  --dsb-paper:    #F7F8FA;        /* page background */
  --dsb-bone:     #EEF1F5;        /* subtle surface */
  --dsb-mist:     #DCE2EA;        /* dividers */
  --dsb-slate-300: #B5BFCC;
  --dsb-slate-500: #7B8898;       /* secondary text */
  --dsb-slate-700: #3F4A5A;       /* body text on light */
  --dsb-ink:       #0E1620;       /* near-black */

  /* Semantic */
  --dsb-success-500: #16A34A;
  --dsb-success-100: #DCFCE7;
  --dsb-warning-500: #D97706;
  --dsb-warning-100: #FEF3C7;
  --dsb-danger-500:  #DC2626;
  --dsb-danger-100:  #FEE2E2;
  --dsb-info-500:    #00B8D9;     /* aliased cyan */

  /* ── Semantic application tokens (use these in components) ── */
  --bg-page:        var(--dsb-paper);
  --bg-surface:     #FFFFFF;
  --bg-subtle:      var(--dsb-bone);
  --bg-inverse:     var(--dsb-navy-800);
  --bg-hero:        var(--dsb-navy-900);

  --fg-primary:     var(--dsb-ink);
  --fg-secondary:   var(--dsb-slate-700);
  --fg-tertiary:    var(--dsb-slate-500);
  --fg-on-inverse:  #FFFFFF;
  --fg-on-inverse-secondary: rgba(255,255,255,0.72);

  --accent:         var(--dsb-cyan-500);
  --accent-hover:   var(--dsb-cyan-400);
  --accent-press:   #009EBA;
  --accent-soft:    var(--dsb-cyan-100);

  --primary:        var(--dsb-navy-800);
  --primary-hover:  var(--dsb-navy-700);
  --primary-press:  #051c33;

  --border-subtle:  var(--dsb-mist);
  --border-default: var(--dsb-slate-300);
  --border-strong:  var(--dsb-slate-500);
  --border-on-inverse: rgba(255,255,255,0.14);

  /* ── Type ─────────────────────────────────────────── */
  --font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (rems, root = 16px) */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-64: 4rem;
  --fs-80: 5rem;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --tracking-tight:  -0.025em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* ── Spacing (4-pt grid) ────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── Radii ─────────────────────────────────────── */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-pill: 999px;

  /* ── Shadows (subtle, layered — never bloom) ──── */
  --shadow-xs: 0 1px 2px rgba(10, 37, 64, 0.06);
  --shadow-sm: 0 2px 6px rgba(10, 37, 64, 0.06), 0 1px 2px rgba(10, 37, 64, 0.04);
  --shadow-md: 0 6px 16px rgba(10, 37, 64, 0.08), 0 2px 4px rgba(10, 37, 64, 0.04);
  --shadow-lg: 0 16px 36px rgba(10, 37, 64, 0.10), 0 4px 8px rgba(10, 37, 64, 0.04);
  --shadow-glow: 0 0 0 4px rgba(0, 184, 217, 0.18);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -1px 0 rgba(0,0,0,0.04);

  /* ── Motion ───────────────────────────────────── */
  --ease-out:  cubic-bezier(0.2, 0.7, 0.25, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    160ms;
  --dur-normal:  240ms;
  --dur-slow:    420ms;
  --dur-pulse:   1800ms;
}

/* ============================================================
   DARK THEME — opt-in via <html data-theme="dark">.
   Overrides the semantic application tokens; token-driven
   components flip automatically. A handful of components that
   hard-code a light surface get explicit overrides below.
   ============================================================ */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Layered dark surfaces (deepest → raised) */
  --bg-hero:        #04101B;        /* hero — deepest */
  --bg-inverse:     #060F18;        /* extra-dark bands recede below page */
  --bg-page:        #0B1B2A;        /* main page background */
  --bg-subtle:      #0E2233;        /* subtle alternating sections */
  --bg-surface:     #12293D;        /* cards, raised surfaces */

  /* Text */
  --fg-primary:     #EAF1F8;
  --fg-secondary:   #B4C2D2;
  --fg-tertiary:    #8294A6;
  --fg-on-inverse:  #FFFFFF;
  --fg-on-inverse-secondary: rgba(255,255,255,0.72);

  /* Accent stays cyan; soft tint becomes a dark wash */
  --accent-soft:    rgba(0,184,217,0.16);

  /* Navy primary buttons need lift on a dark page */
  --primary:        var(--dsb-navy-600);
  --primary-hover:  var(--dsb-navy-500);
  --primary-press:  var(--dsb-navy-700);

  /* Borders → translucent light */
  --border-subtle:  rgba(255,255,255,0.09);
  --border-default: rgba(255,255,255,0.16);
  --border-strong:  rgba(255,255,255,0.30);

  /* Semantic tint backgrounds → dark washes (text stays bright) */
  --dsb-success-100: rgba(34,197,94,0.16);
  --dsb-warning-100: rgba(234,179,8,0.16);
  --dsb-danger-100:  rgba(248,113,113,0.16);
  --dsb-success-500: #34D399;
  --dsb-warning-500: #FBBF24;
  --dsb-danger-500:  #F87171;

  /* Shadows → deep black so they read on dark */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md: 0 6px 16px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.30);
  --shadow-lg: 0 16px 36px rgba(0,0,0,0.55), 0 4px 8px rgba(0,0,0,0.35);
}

/* Smooth the flip (kept subtle; only the big surfaces) */
html, body { transition: background-color var(--dur-normal) var(--ease-out), color var(--dur-normal) var(--ease-out); }

/* ── Component overrides for hard-coded light surfaces ───────── */
/* Sticky header over a (now-dark) light section */
:root[data-theme="dark"] .site-header.is-on-light {
  background: rgba(11, 27, 42, 0.86);
  border-bottom-color: rgba(255,255,255,0.08);
}
/* Casus / sub-page cards that hard-code #fff */
:root[data-theme="dark"] .heatmap-card,
:root[data-theme="dark"] .forecast-card,
:root[data-theme="dark"] .value-card {
  background: var(--bg-surface);
}

/* ── Theme toggle button (in the shared header) ──────────────── */
.theme-toggle {
  width: 38px; height: 38px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.85;
  transition: background var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.is-on-dark .theme-toggle { border-color: rgba(255,255,255,0.22); }
.is-on-light .theme-toggle { border-color: var(--border-default); }
.theme-toggle:hover { opacity: 1; border-color: var(--accent); color: var(--accent); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.theme-toggle-m {
  width: 100%; justify-content: center; gap: 8px;
  height: 46px; border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.22); color: var(--fg-on-inverse);
  background: rgba(255,255,255,0.04);
  font-family: var(--font-sans); font-size: var(--fs-14); font-weight: 500;
}
.theme-toggle-m svg { width: 18px; height: 18px; }
.theme-toggle-m .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle-m .icon-sun { display: inline-block; }
:root[data-theme="dark"] .theme-toggle-m .icon-moon { display: none; }
.theme-toggle-m .tt-label-dark { display: none; }
:root[data-theme="dark"] .theme-toggle-m .tt-label-dark { display: inline; }
:root[data-theme="dark"] .theme-toggle-m .tt-label-light { display: none; }

/* ============================================================
   Type primitives — apply by class on raw HTML, or use as a
   pattern when building components.
   ============================================================ */

html { font-family: var(--font-sans); color: var(--fg-primary); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { font-size: var(--fs-16); line-height: var(--lh-normal); background: var(--bg-page); }

/* Toetsenbord-toegankelijkheid: duidelijke focus-ring voor wie met Tab navigeert
   (verschijnt niet bij muisklik dankzij :focus-visible). */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.dsb-h1, h1.dsb {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 5vw + 1rem, 5rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}
.dsb-h2, h2.dsb {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.875rem, 2.5vw + 1rem, 3rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
.dsb-h3, h3.dsb {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
.dsb-h4, h4.dsb {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
}
.dsb-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--accent);
}
.dsb-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  color: var(--fg-secondary);
}
.dsb-body-lg {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-18);
  line-height: var(--lh-loose);
  color: var(--fg-secondary);
}
.dsb-small {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  line-height: var(--lh-normal);
  color: var(--fg-tertiary);
}
.dsb-caption {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-tertiary);
  text-transform: uppercase;
}
.dsb-data {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}