/* WareQuery design tokens — forest-green (structural neutral) + a single gold * accent. Light theme is default. data-theme="dark" on swaps values. * * Discipline (per the high-end UI/UX research, docs/spec 2026-07-07): * green is the near-neutral "gray" of the system; GOLD is the one scarce * accent, spent on the primary action, the active state, and trust marks. * The old teal "Aurora" glow field is retired. */ :root, :root[data-theme="light"] { /* Surface — faint green-biased paper, cards near-white */ --color-bg: #fbfcfa; --color-bg-subtle: #f4f6f1; --color-bg-muted: #ebeee7; --color-bg-emphasis: #dee3d9; /* Text — forest ink */ --color-text: #14261e; --color-text-muted: #3d5148; --color-text-subtle: #6b7a71; --color-text-inverse: #fbfcfa; /* Border — green-grey hairlines */ --color-border: #e2e6de; --color-border-strong: #ccd3c8; --color-border-focus: #a87c1f; /* Chart grid — neutral green-grey, legible on the paper background. */ --color-chart-grid: #d3d8ce; /* Accent (gold) — the single scarce accent. #8a6516 is AA on paper. */ --color-accent: #8a6516; --color-accent-bg: #f5efdf; --color-accent-text: #6e5214; /* Semantic — never encode good/bad by red-vs-green alone (WCAG 1.4.1). */ --color-success: #2f7e68; --color-warning: #b7791f; --color-danger: #c0392b; /* Pulse marker (existing) */ --brand-mark-ring: 0 0 0 1px rgba(199,154,62,0.55); --color-pulse: #c39a3d; /* Shadow — forest-tinted, neutral (no coloured aura) */ --shadow-sm: 0 1px 2px rgba(20,38,30,.05); --shadow-md: 0 4px 14px rgba(20,38,30,.08); --shadow-lg: 0 16px 40px rgba(20,38,30,.12); --shadow-modal: 0 28px 56px rgba(20,38,30,.20); /* Gold accent gradients (restrained) + soft neutral lifts (glow retired) */ --grad-accent: linear-gradient(135deg, #a07a2a 0%, #8a6516 100%); --grad-text: linear-gradient(120deg, #8a6516 0%, #6e5214 100%); --grad-warm: linear-gradient(120deg, #c39a3d 0%, #8a6516 100%); --color-orange: #a87c1f; --color-orange-strong: #6e5214; --glow: 0 1px 2px rgba(20,38,30,.06), 0 12px 32px -12px rgba(20,38,30,.20); --glow-warm: 0 8px 24px -10px rgba(150,110,30,.28); /* Ambient field — a whisper of forest/gold, not the old aurora glow. */ --aurora-1: rgba(20,38,30,0.04); --aurora-2: rgba(150,110,30,0.03); --aurora-3: rgba(20,38,30,0.03); --aurora-4: rgba(150,110,30,0.025); } :root[data-theme="dark"] { --color-bg: #0c1611; --color-bg-subtle: #111e18; --color-bg-muted: #16261e; --color-bg-emphasis: #22332b; --color-text: #ece8db; --color-text-muted: #aab4ac; --color-text-subtle: #78837b; --color-text-inverse: #0c1611; --color-border: #22302a; --color-border-strong: #2e3e36; --color-border-focus: #deb65e; /* Brighter than --color-border so axis gridlines stay visible against the * forest-black --color-bg (#0c1611). */ --color-chart-grid: #3e4e44; --color-accent: #deb65e; --color-accent-bg: #26200f; --color-accent-text: #e8c877; --color-success: #5bb99a; --color-warning: #e3b24d; --color-danger: #e07a6a; --color-pulse: #deb65e; --shadow-sm: 0 1px 2px rgba(0,0,0,.35); --shadow-md: 0 4px 14px rgba(0,0,0,.45); --shadow-lg: 0 16px 40px rgba(0,0,0,.60); --shadow-modal: 0 28px 56px rgba(0,0,0,.70); --grad-accent: linear-gradient(135deg, #e4c071 0%, #c99b3a 100%); --grad-text: linear-gradient(120deg, #e8c877 0%, #c99b3a 100%); --grad-warm: linear-gradient(120deg, #e4c071 0%, #c99b3a 100%); --color-orange: #e4c071; --color-orange-strong: #c99b3a; --glow: 0 1px 2px rgba(0,0,0,.5), 0 14px 36px -12px rgba(0,0,0,.6); --glow-warm: 0 8px 26px -10px rgba(222,182,94,.30); --aurora-1: rgba(24,54,40,0.55); --aurora-2: rgba(18,40,30,0.45); --aurora-3: rgba(222,182,94,0.05); --aurora-4: rgba(24,54,40,0.40); } :root { /* Spacing — 4px base */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* Type scale */ --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --text-xs: 11px; --text-sm: 12px; --text-base: 14px; --text-md: 15px; --text-lg: 17px; --text-xl: 20px; --text-2xl: 24px; --leading-tight: 1.25; --leading-snug: 1.4; --leading-normal: 1.55; --leading-relaxed: 1.7; /* Radius — airier than the original Linear-tight 3/4/6/10 */ --radius-sm: 5px; --radius-md: 8px; --radius-lg: 13px; --radius-xl: 18px; /* Layout */ --topbar-h: 48px; --sidebar-w: 240px; --context-w: 280px; --content-max: 880px; /* Motion */ --duration-fast: 120ms; --duration-normal: 200ms; --easing: cubic-bezier(0.4, 0, 0.2, 1); /* Focus ring */ --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-border-focus); } /* Honor prefers-color-scheme on first paint when localStorage is empty. * The inline head script writes data-theme to documentElement before this * media query has a chance to matter, but keeping it here ensures any CSS * @media-relative rules (e.g., dark images) still react correctly. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; } }