/*
 * LSFILS design tokens. Source of truth: the LSFILS identity (design system).
 * Colour tokens flip in dark mode; everything else is theme-independent.
 * Force a theme with <html data-theme="light|dark">; otherwise follow the OS.
 */
:root {
  color-scheme: light;

  /* Colour: surfaces and ink */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-sunk: #f1f4f8;
  --color-line: rgb(12 38 80 / 0.16);
  --color-ink: #0c2650;
  --color-ink-muted: #4b5b78;

  /* Colour: brand */
  --color-navy: #0c2650;
  --color-blue: #2d6592;
  --color-orange: #e4892b;
  --color-orange-ink: #9e5a14;
  --color-flag-red: #bc2c2f;
  --color-flag-yellow: #f6cf46;

  /* Colour: components */
  --color-btn-bg: var(--color-ink);
  --color-btn-fg: #ffffff;
  --color-panel: #0c2650;
  --color-panel-ink: #ffffff;
  --color-panel-muted: #b7c4da;
  --color-on-accent-light: #0c2650;
  --color-on-accent-dark: #ffffff;
  --color-placeholder-bg: #e3e9f1;
  --color-placeholder-ink: #c2cddc;

  /* Typography (font variables are provided by next/font in src/app/fonts.ts) */
  --font-display: var(--font-big-shoulders), "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --font-sans: var(--font-schibsted), "Segoe UI", system-ui, sans-serif;
  --font-hand: var(--font-caveat-brush), "Segoe Print", "Bradley Hand", cursive;

  /* Spacing */
  --space-2: 8px;
  --space-3: 12px;
  --space-6: 24px;
  --space-10: 40px;
  --space-section: clamp(72px, 10vw, 128px);
  --gutter: clamp(16px, 4vw, 48px);
  --container-max: 1280px;

  /* Shape */
  --radius-none: 0;
  --radius-sticker: 28px;
  --border-ink: 2.5px;

  /* Elevation: hard offsets only, never blurred */
  --shadow-hover: 3px 3px 0 var(--color-ink);
  --shadow-sticker: 8px 8px 0 var(--color-orange);

  /* Layout */
  --header-height: 72px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #081530;
    --color-surface: #081530;
    --color-sunk: #0e1f40;
    --color-line: rgb(242 240 234 / 0.16);
    --color-ink: #f2f0ea;
    --color-ink-muted: #a9b6cc;
    --color-orange-ink: #f0a95a;
    --color-btn-fg: #081530;
    --color-panel: #0e1f40;
    --color-panel-muted: #a9b6cc;
    --color-placeholder-bg: #12254a;
    --color-placeholder-ink: #223b6b;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #081530;
  --color-surface: #081530;
  --color-sunk: #0e1f40;
  --color-line: rgb(242 240 234 / 0.16);
  --color-ink: #f2f0ea;
  --color-ink-muted: #a9b6cc;
  --color-orange-ink: #f0a95a;
  --color-btn-fg: #081530;
  --color-panel: #0e1f40;
  --color-panel-muted: #a9b6cc;
  --color-placeholder-bg: #12254a;
  --color-placeholder-ink: #223b6b;
}