/* ===================================================================
   Wildlife Analyzer — design tokens
   Ported from design-prototype/styles.css (lines 1–120)
   Two aesthetics × light/dark × compact/comfortable, switched via
   <html data-aesthetic data-dark data-density data-layout>.
   =================================================================== */

:root {
  /* Feldstation — light (default) */
  --bg:        oklch(0.975 0.004 90);
  --bg-2:      oklch(0.955 0.005 88);
  --surface:   oklch(0.992 0.003 90);
  --surface-2: oklch(0.97  0.004 88);
  --ink:       oklch(0.16  0.012 60);
  --ink-2:     oklch(0.32  0.012 60);
  --muted:     oklch(0.52  0.008 70);
  --muted-2:   oklch(0.70  0.006 70);
  --hairline:  oklch(0.88  0.006 70);
  --hairline-strong: oklch(0.78 0.008 70);
  --accent:    oklch(0.42  0.058 145);
  --accent-soft: oklch(0.93 0.025 145);
  --warn:      oklch(0.55  0.105 50);
  --warn-soft: oklch(0.93  0.04 60);
  --danger:    oklch(0.48  0.13 25);
  --danger-soft: oklch(0.94 0.035 25);
  --info:      oklch(0.50  0.07 240);

  /* Species — vivid, one colour per species everywhere (charts, maps, chips).
     Customer rules (Oct 2026): Rehwild orange-yellow, Rotwild red, Gamswild
     blue. Within one chart every pair stays apart for full colour vision and
     for red-green deficiency (checked on the sRGB values; keep lightness
     differences when retuning). Rotwild is a dark red, the female red of the
     social classes below a lighter, cooler crimson; Gamswild a sky blue, the male
     blue an ultramarine — similar on purpose, never in the same chart. */
  --sp-rot:    oklch(0.49 0.19 29);   /* Rotwild     — dark red */
  --sp-reh:    oklch(0.76 0.16 72);   /* Rehwild     — orange-yellow */
  --sp-gams:   oklch(0.68 0.13 230);  /* Gamswild    — sky blue */
  --sp-dam:    oklch(0.70 0.155 160); /* Damwild     — emerald */
  --sp-wild:   oklch(0.38 0.19 305);  /* Schwarzwild — dark violet */
  --sp-muffel: oklch(0.50 0.10 165);  /* Muffelwild  — fir green */
  --sp-sika:   oklch(0.62 0.20 345);  /* Sikawild    — magenta */
  --sp-fuchs:  oklch(0.68 0.165 55);  /* Fuchs       — fox orange */
  --sp-dachs:  oklch(0.42 0.08 250);  /* Dachs       — steel blue */
  --sp-marder: oklch(0.60 0.105 180); /* Marder      — teal */

  /* Social classes (§6): male blue, female red, each from dark (adult) to
     light; young green; unknown neutral. */
  --sc-m-adult:  oklch(0.45 0.20 264);
  --sc-m-sub:    oklch(0.62 0.17 260);
  --sc-m-na:     oklch(0.76 0.11 250);
  --sc-f-adult:  oklch(0.59 0.23 14);
  --sc-f-sub:    oklch(0.73 0.15 10);
  --sc-juv:      oklch(0.72 0.20 138);
  --sc-na-adult: oklch(0.30 0.008 60);
  --sc-na:       oklch(0.86 0.008 60);
  /* Label ink inside a segment: light on the dark fills, dark on the light
     ones. The two neutral classes swap in dark mode, so their ink does too. */
  --sc-on-dark:      oklch(0.99 0.003 90);
  --sc-on-light:     oklch(0.16 0.012 60);
  --sc-na-adult-ink: var(--sc-on-dark);
  --sc-na-ink:       var(--sc-on-light);

  /* Times of day (§7 chips) — their own colours, not borrowed from species. */
  --tod-dawn:  oklch(0.80 0.12 55);
  --tod-day:   oklch(0.84 0.16 95);
  --tod-dusk:  oklch(0.56 0.16 315);
  --tod-night: oklch(0.36 0.11 265);

  /* Type */
  --font-display: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --font-ui:      "IBM Plex Sans", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;
  --font-feature-num: "tnum" 1, "lnum" 1;

  /* Density */
  --row-h: 36px;
  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 16px;
  --gap-5: 24px;
  --gap-6: 32px;
  --gap-7: 48px;

  --pad-card:  20px 24px;
  --radius-sm: 3px;
  --radius:    6px;
  --radius-lg: 10px;

  --shadow-sm: 0 1px 0 oklch(0.85 0.005 70 / 0.5);
  --shadow:    0 1px 2px oklch(0.20 0.01 60 / 0.05), 0 4px 12px oklch(0.20 0.01 60 / 0.04);

  --content-max: 1280px;
}

/* ---------- Aesthetic B: Almanach ---------- */
:root[data-aesthetic="almanach"] {
  --bg:        oklch(0.94  0.020 75);
  --bg-2:      oklch(0.92  0.022 73);
  --surface:   oklch(0.965 0.014 78);
  --surface-2: oklch(0.93  0.018 75);
  --ink:       oklch(0.205 0.025 45);
  --ink-2:     oklch(0.36  0.022 50);
  --muted:     oklch(0.46  0.018 55);
  --muted-2:   oklch(0.66  0.015 65);
  --hairline:  oklch(0.82  0.022 65);
  --hairline-strong: oklch(0.70 0.024 60);
  --accent:    oklch(0.52  0.105 50);
  --accent-soft: oklch(0.90 0.04 60);
  --warn:      oklch(0.46  0.12 30);
  --warn-soft: oklch(0.88  0.05 35);

  --font-display: "Newsreader", "Source Serif 4", Georgia, serif;
  --font-ui:      "Manrope", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
}

/* ---------- Dark mode ---------- */
:root[data-dark="true"] {
  --bg:        oklch(0.16  0.010 230);
  --bg-2:      oklch(0.13  0.010 230);
  --surface:   oklch(0.20  0.012 230);
  --surface-2: oklch(0.24  0.014 230);
  --ink:       oklch(0.96  0.005 90);
  --ink-2:     oklch(0.82  0.006 80);
  --muted:     oklch(0.62  0.010 230);
  --muted-2:   oklch(0.42  0.012 230);
  --hairline:  oklch(0.30  0.014 230);
  --hairline-strong: oklch(0.40 0.016 230);
  --accent:    oklch(0.78  0.10 145);
  --accent-soft: oklch(0.32 0.04 145);
  --warn:      oklch(0.72  0.12 60);
  --warn-soft: oklch(0.30  0.06 50);
  --danger:    oklch(0.70  0.15 25);
  --danger-soft: oklch(0.30 0.07 25);
  --info:      oklch(0.74  0.08 240);
  /* Chart colours too dark to read on the dark surface. */
  --sp-wild:     oklch(0.52 0.20 300);
  --sp-dachs:    oklch(0.74 0.07 255);
  --sc-m-adult:  oklch(0.49 0.20 264);
  --sc-na-adult: oklch(0.88 0.008 60);
  --sc-na:       oklch(0.40 0.008 60);
  --sc-na-adult-ink: var(--sc-on-light);
  --sc-na-ink:       var(--sc-on-dark);
  --tod-night: oklch(0.62 0.11 265);
}
:root[data-dark="true"][data-aesthetic="almanach"] {
  --bg:        oklch(0.18  0.018 50);
  --bg-2:      oklch(0.15  0.020 50);
  --surface:   oklch(0.22  0.020 50);
  --surface-2: oklch(0.26  0.022 50);
  --ink:       oklch(0.94  0.020 80);
  --ink-2:     oklch(0.80  0.018 70);
  --hairline:  oklch(0.32  0.024 55);
  --accent:    oklch(0.74  0.12 55);
  --accent-soft: oklch(0.34 0.05 55);
}

/* ---------- Dark mode, "Wie System" ---------- */
/* data-dark="auto" (PreferencesController) follows the device setting. Same
   values as the block above — keep the two in sync. */
@media (prefers-color-scheme: dark) {
  :root[data-dark="auto"] {
    --bg:        oklch(0.16  0.010 230);
    --bg-2:      oklch(0.13  0.010 230);
    --surface:   oklch(0.20  0.012 230);
    --surface-2: oklch(0.24  0.014 230);
    --ink:       oklch(0.96  0.005 90);
    --ink-2:     oklch(0.82  0.006 80);
    --muted:     oklch(0.62  0.010 230);
    --muted-2:   oklch(0.42  0.012 230);
    --hairline:  oklch(0.30  0.014 230);
    --hairline-strong: oklch(0.40 0.016 230);
    --accent:    oklch(0.78  0.10 145);
    --accent-soft: oklch(0.32 0.04 145);
    --warn:      oklch(0.72  0.12 60);
    --warn-soft: oklch(0.30  0.06 50);
    --danger:    oklch(0.70  0.15 25);
    --danger-soft: oklch(0.30 0.07 25);
    --info:      oklch(0.74  0.08 240);
    /* Chart colours too dark to read on the dark surface. */
    --sp-wild:     oklch(0.52 0.20 300);
    --sp-dachs:    oklch(0.74 0.07 255);
    --sc-m-adult:  oklch(0.49 0.20 264);
    --sc-na-adult: oklch(0.88 0.008 60);
    --sc-na:       oklch(0.40 0.008 60);
    --sc-na-adult-ink: var(--sc-on-light);
    --sc-na-ink:       var(--sc-on-dark);
    --tod-night: oklch(0.62 0.11 265);
  }
  :root[data-dark="auto"][data-aesthetic="almanach"] {
    --bg:        oklch(0.18  0.018 50);
    --bg-2:      oklch(0.15  0.020 50);
    --surface:   oklch(0.22  0.020 50);
    --surface-2: oklch(0.26  0.022 50);
    --ink:       oklch(0.94  0.020 80);
    --ink-2:     oklch(0.80  0.018 70);
    --hairline:  oklch(0.32  0.024 55);
    --accent:    oklch(0.74  0.12 55);
    --accent-soft: oklch(0.34 0.05 55);
  }
  :root[data-dark="auto"] { color-scheme: dark; }
}
/* Native form controls, scrollbars and the like follow the scheme too. */
:root[data-dark="true"] { color-scheme: dark; }

/* ---------- Compact density ---------- */
:root[data-density="compact"] {
  --row-h: 30px;
  --gap-3: 8px;
  --gap-4: 12px;
  --gap-5: 18px;
  --gap-6: 24px;
  --pad-card: 14px 18px;
}

/* ---------- Print: force Feldstation light regardless of user prefs ---------- */
@media print {
  :root,
  :root[data-aesthetic="almanach"],
  :root[data-dark="true"],
  :root[data-dark="auto"] {
    color-scheme: light;
    --bg:        oklch(0.975 0.004 90);
    --bg-2:      oklch(0.955 0.005 88);
    --surface:   oklch(0.992 0.003 90);
    --surface-2: oklch(0.97  0.004 88);
    --ink:       oklch(0.16  0.012 60);
    --ink-2:     oklch(0.32  0.012 60);
    --muted:     oklch(0.52  0.008 70);
    --hairline:  oklch(0.88  0.006 70);
    --accent:    oklch(0.42  0.058 145);
    --sp-wild:     oklch(0.38 0.19 305);
    --sp-dachs:    oklch(0.42 0.08 250);
    --sc-m-adult:  oklch(0.45 0.20 264);
    --sc-na-adult: oklch(0.30 0.008 60);
    --sc-na:       oklch(0.86 0.008 60);
    --sc-na-adult-ink: var(--sc-on-dark);
    --sc-na-ink:       var(--sc-on-light);
    --tod-night: oklch(0.36 0.11 265);
    --font-display: "Source Serif 4", "Source Serif Pro", Georgia, serif;
    --font-ui:      "IBM Plex Sans", system-ui, sans-serif;
  }
}

/* ===================================================================
   Base body + headings (minimal — full component layer comes with
   the sidebar shell in a later phase)
   =================================================================== */

html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  font-feature-settings: var(--font-feature-num);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:root[data-density="compact"] body { font-size: 13px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }