/* External @imports must come first per CSS spec. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); @import "tailwindcss"; @import "tw-animate-css"; /* ============================================================================ THEME SYSTEM ---------------------------------------------------------------------------- Every color is a semantic CSS variable declared per theme below. The `@theme inline` block points Tailwind's color utilities (bg-*, text-*, border-*, ring-*, …) directly at those variables, so switching the `data-theme` attribute on reskins the whole UI at runtime with no rebuild. Four themes ship: two light-neutral surfaces and status families for OK / warning / caution / danger / info that adapt to each surface. Semantic status vocabulary (use these, NOT raw palette colors): success — worked / confirmed / data / OK (was emerald) warning — new-band / attention (was amber) caution — new-mode / new-slot / lighter alert (was yellow) danger — new / split / negative (was rose) info — informational (was sky/blue) destructive — hard errors / live REC / delete (was red) Each family has: base (dots/bars/solid), -foreground (text on base), -muted (soft pill fill), -muted-foreground (text on pill), -border. ========================================================================= */ /* ---- Theme 1: Warm light (default) — warm taupe & burnt orange ---------- */ :root, [data-theme="light-warm"] { --background: #e8dfc9; /* warm taupe — deeper than cream */ --foreground: #1c1917; /* stone-900 */ --card: #faf6ea; /* lifted off-white cream */ --card-foreground: #1c1917; --popover: #faf6ea; --popover-foreground: #1c1917; --primary: #b8410c; /* burnt orange, slightly deeper */ --primary-foreground: #fff7ed; --secondary: #ddd2b8; --secondary-foreground: #1c1917; --muted: #ddd2b8; /* toolbars / table headers */ --muted-foreground: #44403c; /* stone-700 — readable on muted */ --accent: #f8d6a9; /* warm amber-cream */ --accent-foreground: #7c2d12; /* orange-900 */ --destructive: #a51c1c; --destructive-foreground: #ffffff; --destructive-muted: #fef2f2; --destructive-muted-foreground: #b91c1c; --border: #c8b994; /* deeper warm beige border */ --input: #c8b994; --ring: #d97706; /* amber-600 focus ring */ --success: #16a34a; --success-foreground: #ffffff; --success-muted: #dcfce7; --success-muted-foreground: #166534; --success-border: #86efac; --warning: #d97706; --warning-foreground: #ffffff; --warning-muted: #fef3c7; --warning-muted-foreground: #92400e; --warning-border: #fcd34d; --caution: #ca8a04; --caution-foreground: #1c1917; --caution-muted: #fef9c3; --caution-muted-foreground: #854d0e; --caution-border: #fde047; --danger: #e11d48; --danger-foreground: #ffffff; --danger-muted: #ffe4e6; --danger-muted-foreground: #9f1239; --danger-border: #fda4af; --info: #0284c7; --info-foreground: #ffffff; --info-muted: #e0f2fe; --info-muted-foreground: #075985; --info-border: #7dd3fc; /* Band/mode matrix (BandSlotGrid) — original emerald/indigo/stone ramp. */ --mx-call-conf: #15803d; /* call confirmed */ --mx-call-work: #6ee7b7; /* call worked */ --mx-dx-conf: #3730a3; /* entity confirmed*/ --mx-dx-work: #a5b4fc; /* entity worked */ --mx-none: #e7e5e4; /* never worked */ --scrollbar-thumb: #b8a880; --scrollbar-thumb-hover: #968455; --card-shadow: 0 1px 2px rgba(28, 25, 23, 0.05), 0 0 0 1px rgba(28, 25, 23, 0.02); color-scheme: light; } /* ---- Theme 1b: Cool light (slate/blue) — crisp daylight, neutral cool --- */ [data-theme="light-cool"] { --background: #f4f6f8; /* cool blue-white */ --foreground: #0f172a; /* slate-900 */ --card: #ffffff; --card-foreground: #0f172a; --popover: #ffffff; --popover-foreground: #0f172a; --primary: #2563eb; /* blue-600 */ --primary-foreground: #ffffff; --secondary: #e2e8f0; /* slate-200 */ --secondary-foreground: #0f172a; --muted: #e6ebf1; /* toolbars / table headers */ --muted-foreground: #475569; /* slate-600 — readable on muted */ --accent: #dbeafe; /* blue-100 */ --accent-foreground: #1e3a8a; /* blue-900 */ --destructive: #dc2626; --destructive-foreground: #ffffff; --destructive-muted: #fef2f2; --destructive-muted-foreground: #b91c1c; --border: #d3dae2; /* cool slate border */ --input: #d3dae2; --ring: #3b82f6; /* blue-500 focus ring */ --success: #16a34a; --success-foreground: #ffffff; --success-muted: #dcfce7; --success-muted-foreground: #166534; --success-border: #86efac; --warning: #d97706; --warning-foreground: #ffffff; --warning-muted: #fef3c7; --warning-muted-foreground: #92400e; --warning-border: #fcd34d; --caution: #ca8a04; --caution-foreground: #1c1917; --caution-muted: #fef9c3; --caution-muted-foreground: #854d0e; --caution-border: #fde047; --danger: #e11d48; --danger-foreground: #ffffff; --danger-muted: #ffe4e6; --danger-muted-foreground: #9f1239; --danger-border: #fda4af; --info: #0284c7; --info-foreground: #ffffff; --info-muted: #e0f2fe; --info-muted-foreground: #075985; --info-border: #7dd3fc; /* Band/mode matrix (BandSlotGrid) — emerald/indigo ramp, cool neutral base. */ --mx-call-conf: #15803d; --mx-call-work: #6ee7b7; --mx-dx-conf: #3730a3; --mx-dx-work: #a5b4fc; --mx-none: #e2e8f0; --scrollbar-thumb: #b6c2d1; --scrollbar-thumb-hover: #8fa1b5; --card-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.02); color-scheme: light; } /* ---- Theme 1c: Sage light (Nordic) — soft green-grey, low-fatigue ------- */ [data-theme="light-sage"] { --background: #eef1ec; /* pale sage */ --foreground: #1a2420; /* deep pine-ink */ --card: #f8faf6; /* lifted off-white with a green cast */ --card-foreground: #1a2420; --popover: #f8faf6; --popover-foreground: #1a2420; --primary: #2f855a; /* deep sage green */ --primary-foreground: #f0fdf4; --secondary: #dde5db; --secondary-foreground: #1a2420; --muted: #dde5db; /* toolbars / table headers */ --muted-foreground: #445048; /* muted pine — readable on muted */ --accent: #d7e8d5; /* soft green */ --accent-foreground: #1e4634; /* forest-900 */ --destructive: #b91c1c; --destructive-foreground: #ffffff; --destructive-muted: #fef2f2; --destructive-muted-foreground: #b91c1c; --border: #cdd8ce; /* soft sage border */ --input: #cdd8ce; --ring: #38a169; /* green focus ring */ --success: #16a34a; --success-foreground: #ffffff; --success-muted: #dcfce7; --success-muted-foreground: #166534; --success-border: #86efac; --warning: #d97706; --warning-foreground: #ffffff; --warning-muted: #fef3c7; --warning-muted-foreground: #92400e; --warning-border: #fcd34d; --caution: #ca8a04; --caution-foreground: #1c1917; --caution-muted: #fef9c3; --caution-muted-foreground: #854d0e; --caution-border: #fde047; --danger: #e11d48; --danger-foreground: #ffffff; --danger-muted: #ffe4e6; --danger-muted-foreground: #9f1239; --danger-border: #fda4af; --info: #0284c7; --info-foreground: #ffffff; --info-muted: #e0f2fe; --info-muted-foreground: #075985; --info-border: #7dd3fc; /* Band/mode matrix (BandSlotGrid) — emerald/indigo ramp, sage neutral base. */ --mx-call-conf: #15803d; --mx-call-work: #6ee7b7; --mx-dx-conf: #3730a3; --mx-dx-work: #a5b4fc; --mx-none: #dde5db; --scrollbar-thumb: #b3c2b3; --scrollbar-thumb-hover: #91a591; --card-shadow: 0 1px 2px rgba(26, 36, 32, 0.06), 0 0 0 1px rgba(26, 36, 32, 0.02); color-scheme: light; } /* ---- Theme 1d: Dim slate — mid-tone twilight, between light and dark ---- */ [data-theme="dim-slate"] { --background: #343b47; /* medium slate — light text, not deep dark */ --foreground: #eceef2; --card: #3d4552; /* lifted panel */ --card-foreground: #eceef2; --popover: #3d4552; --popover-foreground: #eceef2; --primary: #fb923c; /* orange-400 — brand warmth, pops on slate */ --primary-foreground: #241206; --secondary: #454e5c; --secondary-foreground: #eceef2; --muted: #414a58; /* toolbars / table headers */ --muted-foreground: #b4bcc9; /* readable on muted */ --accent: #495468; /* hover / selection tint */ --accent-foreground: #dce3ef; --destructive: #ef4444; --destructive-foreground: #1a0808; --destructive-muted: #3f1f1f; --destructive-muted-foreground: #fca5a5; --border: #4e5867; --input: #4e5867; --ring: #fdba74; /* orange-300 focus ring */ --success: #34d399; --success-foreground: #06231a; --success-muted: #1c3d34; --success-muted-foreground: #6ee7b7; --success-border: #2a5f4c; --warning: #fbbf24; --warning-foreground: #241a06; --warning-muted: #41371a; --warning-muted-foreground: #fcd34d; --warning-border: #5e4d22; --caution: #facc15; --caution-foreground: #242006; --caution-muted: #403b1a; --caution-muted-foreground: #fde047; --caution-border: #5b5222; --danger: #fb7185; --danger-foreground: #260a11; --danger-muted: #421f28; --danger-muted-foreground: #fda4af; --danger-border: #63303c; --info: #38bdf8; --info-foreground: #061f2b; --info-muted: #16384a; --info-muted-foreground: #7dd3fc; --info-border: #1d5670; /* Matrix: bright confirmed, medium worked, slate not-worked (sits on dim). */ --mx-call-conf: #22c55e; --mx-call-work: #2f7d55; --mx-dx-conf: #6366f1; --mx-dx-work: #3f3f8a; --mx-none: #4a5262; --scrollbar-thumb: #565f70; --scrollbar-thumb-hover: #6b7588; --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(236, 238, 242, 0.05); color-scheme: dark; } /* ---- Theme 2: Warm dark (espresso) — same soul, night mode ------------- */ [data-theme="dark-warm"] { --background: #221d18; --foreground: #ede6d8; --card: #2e2820; --card-foreground: #ede6d8; --popover: #2e2820; --popover-foreground: #ede6d8; --primary: #e07a2e; /* brighter burnt orange for dark */ --primary-foreground: #1a1512; --secondary: #3a3229; --secondary-foreground: #ede6d8; --muted: #352e26; --muted-foreground: #bcae9a; --accent: #4a3a28; --accent-foreground: #f8d6a9; --destructive: #e5484d; --destructive-foreground: #1a1512; --destructive-muted: #3a1414; --destructive-muted-foreground: #fca5a5; --border: #473e33; --input: #473e33; --ring: #e8853a; --success: #34d399; --success-foreground: #0e2a20; --success-muted: #123024; --success-muted-foreground: #6ee7b7; --success-border: #1e5540; --warning: #fbbf24; --warning-foreground: #2a1f08; --warning-muted: #3a2e10; --warning-muted-foreground: #fcd34d; --warning-border: #5c4a18; --caution: #facc15; --caution-foreground: #2a2607; --caution-muted: #38330f; --caution-muted-foreground: #fde047; --caution-border: #574f18; --danger: #fb7185; --danger-foreground: #2a0d13; --danger-muted: #3a1720; --danger-muted-foreground: #fda4af; --danger-border: #5c2530; --info: #38bdf8; --info-foreground: #08222e; --info-muted: #0c2a3a; --info-muted-foreground: #7dd3fc; --info-border: #164a5c; /* Matrix: bright confirmed, medium-solid worked (clearly visible on dark), warm-gray not-worked lifted off the card. */ --mx-call-conf: #22c55e; --mx-call-work: #2f7d55; --mx-dx-conf: #6366f1; --mx-dx-work: #3f3f8a; --mx-none: #453d33; --scrollbar-thumb: #5c5044; --scrollbar-thumb-hover: #7a6a58; --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 240, 220, 0.04); color-scheme: dark; } /* ---- Theme 3: Graphite dark — cool slate, technical look --------------- */ [data-theme="dark-graphite"] { --background: #16181d; --foreground: #e6e8ec; --card: #1f232b; --card-foreground: #e6e8ec; --popover: #1f232b; --popover-foreground: #e6e8ec; --primary: #f97316; /* orange-500 pops on slate */ --primary-foreground: #0a0c10; --secondary: #272c35; --secondary-foreground: #e6e8ec; --muted: #232830; --muted-foreground: #9aa2b1; --accent: #2a3240; --accent-foreground: #cbd5e5; --destructive: #ef4444; --destructive-foreground: #0a0c10; --destructive-muted: #331414; --destructive-muted-foreground: #fca5a5; --border: #2e343f; --input: #2e343f; --ring: #fb8c3c; --success: #34d399; --success-foreground: #06231a; --success-muted: #0f2e26; --success-muted-foreground: #6ee7b7; --success-border: #17513f; --warning: #fbbf24; --warning-foreground: #241a06; --warning-muted: #33290f; --warning-muted-foreground: #fcd34d; --warning-border: #4f3f16; --caution: #facc15; --caution-foreground: #242006; --caution-muted: #322e0e; --caution-muted-foreground: #fde047; --caution-border: #4c4416; --danger: #fb7185; --danger-foreground: #260a11; --danger-muted: #34141d; --danger-muted-foreground: #fda4af; --danger-border: #532430; --info: #38bdf8; --info-foreground: #061f2b; --info-muted: #0b2938; --info-muted-foreground: #7dd3fc; --info-border: #124659; /* Matrix: bright confirmed, medium-solid worked, cool-gray not-worked. */ --mx-call-conf: #22c55e; --mx-call-work: #2f7d55; --mx-dx-conf: #6366f1; --mx-dx-work: #3f3f8a; --mx-none: #333a45; --scrollbar-thumb: #3a4150; --scrollbar-thumb-hover: #4e5768; --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(230, 232, 236, 0.04); color-scheme: dark; } /* ---- Theme 4: High contrast — pure black / white, max legibility ------- */ [data-theme="high-contrast"] { --background: #000000; --foreground: #ffffff; --card: #0d0d0d; --card-foreground: #ffffff; --popover: #0d0d0d; --popover-foreground: #ffffff; --primary: #ff7a1a; --primary-foreground: #000000; --secondary: #1a1a1a; --secondary-foreground: #ffffff; --muted: #141414; --muted-foreground: #d4d4d4; --accent: #262626; --accent-foreground: #ffffff; --destructive: #ff4d4d; --destructive-foreground: #000000; --destructive-muted: #2a0808; --destructive-muted-foreground: #ff9999; --border: #3f3f3f; --input: #3f3f3f; --ring: #ffab5e; --success: #22e37a; --success-foreground: #002313; --success-muted: #06231a; --success-muted-foreground: #6affb0; --success-border: #0f6b4a; --warning: #ffcc33; --warning-foreground: #201900; --warning-muted: #2a2205; --warning-muted-foreground: #ffe08a; --warning-border: #6b5510; --caution: #ffe14d; --caution-foreground: #201d00; --caution-muted: #2a2705; --caution-muted-foreground: #fff08a; --caution-border: #6b6210; --danger: #ff6b7d; --danger-foreground: #23000a; --danger-muted: #2a0a12; --danger-muted-foreground: #ffb3bd; --danger-border: #6b1f2c; --info: #4dc4ff; --info-foreground: #001a26; --info-muted: #052330; --info-muted-foreground: #a3e0ff; --info-border: #0f5a6b; /* Matrix: max-contrast ramp on pure black. */ --mx-call-conf: #2ee87f; --mx-call-work: #17a85a; --mx-dx-conf: #7d97ff; --mx-dx-work: #3646b0; --mx-none: #3a3a3a; --scrollbar-thumb: #4a4a4a; --scrollbar-thumb-hover: #666666; --card-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); color-scheme: dark; } /* ── Data-viz palette (Statistics dashboard) ──────────────────────────────── A VALIDATED categorical palette, not hand-picked: the slot ORDER is what makes it colour-blind-safe (worst adjacent ΔE 24.2 light / 10.3 dark), so never reorder, recycle, or generate a 9th hue — fold the tail into "Other" instead. The dark column is the same eight hues re-stepped for a dark surface, NOT an automatic inversion. --chart-1 is the DEFAULT single-series hue: a chart with one series uses it for every bar. Colour is for identity, never to re-encode a length the bar already shows. --chart-seq-* is a ONE-HUE ramp for magnitude (the hour×band heatmap). On light themes it runs light→dark; on dark themes dark→light, so "near zero" always recedes toward the surface instead of glowing. */ :root, [data-theme="light-warm"], [data-theme="light-cool"], [data-theme="light-sage"] { --chart-1: #2a78d6; /* blue — default single-series hue */ --chart-2: #1baf7a; /* aqua */ --chart-3: #eda100; /* yellow */ --chart-4: #008300; /* green */ --chart-5: #4a3aa7; /* violet */ --chart-6: #e34948; /* red */ --chart-7: #e87ba4; /* magenta */ --chart-8: #eb6834; /* orange */ --chart-seq-1: #cde2fb; --chart-seq-2: #9ec5f4; --chart-seq-3: #6da7ec; --chart-seq-4: #3987e5; --chart-seq-5: #256abf; --chart-seq-6: #104281; } [data-theme="dim-slate"], [data-theme="dark-warm"], [data-theme="dark-graphite"], [data-theme="high-contrast"] { --chart-1: #3987e5; --chart-2: #199e70; --chart-3: #c98500; --chart-4: #008300; --chart-5: #9085e9; --chart-6: #e66767; --chart-7: #d55181; --chart-8: #d95926; /* Reversed: the lowest step must sink toward the dark surface. */ --chart-seq-1: #0d366b; --chart-seq-2: #184f95; --chart-seq-3: #256abf; --chart-seq-4: #3987e5; --chart-seq-5: #6da7ec; --chart-seq-6: #9ec5f4; } /* Map Tailwind's color utilities onto the semantic vars above. `inline` makes the generated utilities reference var(--…) directly, so overriding a var in a [data-theme] block re-skins every utility at runtime. */ @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-destructive-muted: var(--destructive-muted); --color-destructive-muted-foreground: var(--destructive-muted-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-success-muted: var(--success-muted); --color-success-muted-foreground: var(--success-muted-foreground); --color-success-border: var(--success-border); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-warning-muted: var(--warning-muted); --color-warning-muted-foreground: var(--warning-muted-foreground); --color-warning-border: var(--warning-border); --color-caution: var(--caution); --color-caution-foreground: var(--caution-foreground); --color-caution-muted: var(--caution-muted); --color-caution-muted-foreground: var(--caution-muted-foreground); --color-caution-border: var(--caution-border); --color-danger: var(--danger); --color-danger-foreground: var(--danger-foreground); --color-danger-muted: var(--danger-muted); --color-danger-muted-foreground: var(--danger-muted-foreground); --color-danger-border: var(--danger-border); --color-info: var(--info); --color-info-foreground: var(--info-foreground); --color-info-muted: var(--info-muted); --color-info-muted-foreground: var(--info-muted-foreground); --color-info-border: var(--info-border); --color-mx-call-conf: var(--mx-call-conf); --color-mx-call-work: var(--mx-call-work); --color-mx-dx-conf: var(--mx-dx-conf); --color-mx-dx-work: var(--mx-dx-work); --color-mx-none: var(--mx-none); --radius: 0.5rem; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, 'Courier New', monospace; } @layer base { * { @apply border-border; } html, body, #root { height: 100%; } /* Root rem base. Tailwind sizing (text/heights/padding/gaps) is in rem, so this is the single global density knob — shrinks the whole UI uniformly while Leaflet maps (px-based) stay correct. Default browser base is 16px. */ html { font-size: 13px; } body { @apply bg-background text-foreground; font-family: var(--font-sans); font-size: 0.95rem; line-height: 1.4; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } } /* Subtle elevation on every Card-styled surface so cards visibly sit on top of the background — paper-on-paper feel, tuned per theme. */ .bg-card { box-shadow: var(--card-shadow); } /* Scrollbar tuned to each theme's surface */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 5px; border: 2px solid var(--background); } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* ── Frameless window: drag region ────────────────────────────────────────── The OS title bar is gone (main.go, Frameless), so the app header IS the title bar and must be draggable. Everything interactive inside it opts OUT: a drag region swallows clicks, and without this the menus and toolbar buttons would move the window instead of doing their job. Opting out by ROLE rather than listing each child keeps a future button working without anyone remembering this rule. */ .app-dragregion { --wails-draggable: drag; } .app-dragregion button, .app-dragregion a, .app-dragregion input, .app-dragregion select, .app-dragregion textarea, .app-dragregion nav, .app-dragregion [role='button'], .app-dragregion [role='menu'], .app-dragregion [data-no-drag] { --wails-draggable: no-drag; } /* Native date inputs: the WebView draws its calendar glyph in near-black, which disappears on the dark themes. Invert it there — the control itself is worth keeping (OS calendar, locale date order, keyboard entry), only its icon needs help. */ [data-theme='dim-slate'] input[type='date']::-webkit-calendar-picker-indicator, [data-theme='dark-warm'] input[type='date']::-webkit-calendar-picker-indicator, [data-theme='dark-graphite'] input[type='date']::-webkit-calendar-picker-indicator, [data-theme='high-contrast'] input[type='date']::-webkit-calendar-picker-indicator { filter: invert(1) brightness(1.6); opacity: 0.75; }