/* =================================================================== Wildlife Analyzer — design tokens Ported from design-prototype/styles.css (lines 1–120) Two aesthetics × light/dark × compact/comfortable, switched via . =================================================================== */ :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); --info: oklch(0.50 0.07 240); /* Species — calibrated against both aesthetics */ --sp-rot: oklch(0.55 0.11 25); /* Rotwild — red ochre */ --sp-reh: oklch(0.55 0.09 70); /* Rehwild — warm yellow */ --sp-gams: oklch(0.46 0.07 220); /* Gamswild — slate blue */ --sp-wild: oklch(0.40 0.04 30); /* Wildschwein — burnt umber */ --sp-fuchs: oklch(0.60 0.13 50); /* Fuchs — copper */ --sp-dachs: oklch(0.32 0.02 60); /* Dachs — dark mole */ --sp-marder: oklch(0.55 0.05 280); /* Marder — desaturated violet */ /* 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); } :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); } /* ---------- 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"] { --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); --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; }