/* =================================================================== bat_analyzer — design tokens (taken over from wildlife_analyzer) 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); --danger-soft: oklch(0.94 0.035 25); --info: oklch(0.50 0.07 240); /* Acoustic species groups (plan §6, config/taxa.yml) — one colour per group in every chart, map and chip, in taxa order. Slots 1–6 of the dataviz reference palette; checked with its validator against --surface in both modes (adjacent pairs: CVD ΔE ≥ 8.4, normal vision ≥ 19.3). Aqua, yellow and magenta are below 3:1 on the light surface, so every chart comes with a table. Grey is not a slot: a bat whose group is unknown. */ --grp-nyctaloid: #2a78d6; /* blue */ --grp-pipistrelloid: #eb6834; /* orange */ --grp-myotis: #1baf7a; /* aqua */ --grp-plecotus: #eda100; /* yellow */ --grp-barbastella: #e87ba4; /* magenta */ --grp-rhinolophus: #008300; /* green */ --grp-indet: #a9a49e; /* grey */ /* Charts: night band, temperature line. */ --chart-night: oklch(0.36 0.11 265); --chart-temp: oklch(0.40 0.02 60); /* dark neutral, drawn dashed: apart from every group */ /* 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. */ --grp-nyctaloid: #3987e5; --grp-pipistrelloid: #d95926; --grp-myotis: #199e70; --grp-plecotus: #c98500; --grp-barbastella: #d55181; --grp-indet: #75716b; --chart-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. */ --grp-nyctaloid: #3987e5; --grp-pipistrelloid: #d95926; --grp-myotis: #199e70; --grp-plecotus: #c98500; --grp-barbastella: #d55181; --grp-indet: #75716b; --chart-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); --grp-nyctaloid: #2a78d6; --grp-pipistrelloid: #eb6834; --grp-myotis: #1baf7a; --grp-plecotus: #eda100; --grp-barbastella: #e87ba4; --grp-indet: #a9a49e; --chart-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; }