/* ER (EarthRanger) theme — light-mode-first, blue as primary action. * * Activated by setting `data-theme="er"` on . This is the "how would * Otus look inside EarthRanger's design system?" preview theme. The ER * design system is light-first, so this flips Otus's dark canvas to white * and swaps every accent — very different from the default and Asta/Strata * variants. * * Primitives sourced from the ER Design System spec (Figma: * gQJAI5XKeENQsqkCaFBev3). Semantic tokens (UI/Text/Primary, UI/CTA Primary * Blue, etc.) are mapped to Otus's --otus-* seam; extra ER palettes (data * viz categorical/tracks/sequential, event priority, patrol status) are * exposed as separate variables so chart_block.js and map.js can pick from * them without re-hardcoding hex. */ :root[data-theme="er"] { /* ── surfaces ───────────────────────────────────────────────────────── */ --otus-bg: #ffffff; /* UI/Background/Primary Background */ --otus-surface-1: #f3f3f3; /* UI/Background/Secondary Background */ --otus-surface-2: #f9f9f9; /* Greyscale/11 — nested panel */ --otus-surface-overlay: rgba(0, 0, 0, 0.5); /* modal scrim (dark on light) */ /* ── text ───────────────────────────────────────────────────────────── */ --otus-text: #000000; /* UI/Text/Primary Text */ --otus-text-muted: #63666a; /* UI/Text/Secondary Text */ --otus-text-disabled: #767676; /* UI/Text/Disabled */ /* ── accents ────────────────────────────────────────────────────────── */ --otus-accent: #0056c7; /* UI/CTA Primary Blue */ --otus-accent-soft: #dde8f8; /* UI/CTA Secondary Blue */ --otus-accent-faint: #0056c722; /* CTA Blue @ ~13% — soft borders/bg */ --otus-accent-mid: #0056c755; /* CTA Blue @ ~33% — hover borders */ --otus-accent-strong: #0056c799; /* CTA Blue @ ~60% — emphasis text */ --otus-accent-secondary: #3e35a3; /* Indigo/2 — secondary accent */ --otus-accent-pink: #b62879; /* Magenta/2 — tertiary accent */ --otus-accent-pink-faint:#b6287922; /* Magenta @ ~13% — subtle fill */ /* ── contrast ───────────────────────────────────────────────────────── */ --otus-text-on-accent: #ffffff; /* white on blue/indigo accent fills */ /* ── status ─────────────────────────────────────────────────────────── */ --otus-danger: #d0031b; /* UI/Status/Error-Destructive */ --otus-warning: #e76826; /* UI/Status/Warning */ --otus-success: #00882e; /* UI/Status/Success */ /* ── lines ──────────────────────────────────────────────────────────── */ --otus-border: rgba(0, 0, 0, 0.06); /* hairline — dark on light */ --otus-border-strong: #dddddd; /* UI/Divider Lines */ /* ── font families (ER Design System — web tier: Helvetica Neue) ───── * ER doesn't specify a mono font — content-first design system, no code * blocks. Keep Roboto Mono for the few mono call sites Otus needs. */ --otus-font-family-heading: "Helvetica Neue", "Helvetica", Arial, sans-serif; --otus-font-family-body: "Helvetica Neue", "Helvetica", Arial, sans-serif; --otus-font-family-mono: "Roboto Mono", ui-monospace, Menlo, monospace; --otus-font-family: var(--otus-font-family-body); /* ── ER extra palettes ─────────────────────────────────────────────── * Beyond the semantic --otus-* seam, expose the ER data-viz and * status palettes as raw tokens so chart_block.js, map.js, and event * pills can pick from them by index instead of re-hardcoding hex. * Not consumed by default Otus components yet — wire in as needed. */ /* Event Priority */ --er-priority-red: #d0031b; --er-priority-amber: #e76826; --er-priority-green: #006842; --er-priority-grey: #888b8d; /* Patrol Status */ --er-patrol-active: #3e35a3; --er-patrol-overdue: #b62879; --er-patrol-scheduled: #107283; /* Categorical palette — for charts with distinct series */ --er-cat-1: #3e35a3; --er-cat-2: #488a00; --er-cat-3: #00958f; --er-cat-4: #b62879; --er-cat-5: #c6880c; --er-cat-6: #00d0c8; --er-cat-7: #78d811; --er-cat-8: #5c4fe7; --er-cat-9: #f4db20; --er-cat-10: #ed3ea2; /* Tracks palette — for map subject tracks */ --er-track-1: #3e35a3; --er-track-2: #b62879; --er-track-3: #ff803e; --er-track-4: #ed3ea2; --er-track-5: #3089ff; --er-track-6: #8c1700; --er-track-7: #a100cb; --er-track-8: #004e26; --er-track-9: #002960; --er-track-10: #f23b0e; /* Sequential palette — for gradients / ordinal data */ --er-seq-1: #f4db20; --er-seq-2: #ffb700; --er-seq-3: #ed3ea2; --er-seq-4: #a100cb; --er-seq-5: #5c4fe7; --er-seq-6: #0056c7; --er-seq-7: #00882e; --er-seq-8: #78d811; }