/* ============================================================ VISTRO — app.css · centralized theme tokens ------------------------------------------------------------ Single source of truth for colors, shadows, radii — and they adapt to the OS light/dark preference automatically. Change a color HERE and it updates every page that links this file. No more editing the same hex in every view. In a page's : Then use the tokens: color: var(--text); background: var(--bg-base); ============================================================ */ :root { /* Light mode (default) */ --bg-base: #f8f9fa; --bg-card: #ffffff; --bg-elevated: #f1f3f5; --bg-input: #ffffff; --bg-input-focus: #fff8f8; --accent: #dc2626; --accent-light: #ef4444; --accent-soft: rgba(220, 38, 38, 0.1); --accent-glow: rgba(220, 38, 38, 0.3); /* Semantic / status colors — light values (readable on light surfaces). Pages tint backgrounds from these with color-mix(... X%, transparent) so the same token works on either theme. */ --success: #16a34a; --success-strong: #15803d; --warning: #ca8a04; --info: #2563eb; --purple: #7c3aed; --cyan: #0891b2; /* Floor table-status fills. The saturated three carry a white label and work on either theme; --table-available is the neutral "empty" fill and flips light/dark below. */ --table-available: #cbd5e1; --table-active: #16a34a; --table-dirty: #a16207; --table-served: #2563eb; /* Extra surface step for hover/active states (above --bg-elevated) */ --bg-hover: #e9ecef; /* Typography — one place for the app font stacks */ --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; --gold: #b8860b; --gold-light: #d4a843; --text: #1a1a1a; --text-secondary: #4a4a4a; --text-muted: #6b7280; --border: rgba(0, 0, 0, 0.1); --border-light: rgba(0, 0, 0, 0.15); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12); --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.15); --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 12px 48px rgba(0, 0, 0, 0.05); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; /* Decorative login atmosphere */ --float-opacity: 0.08; --steam-opacity: 0.03; } /* Dark mode — follows the OS theme with zero JS */ @media (prefers-color-scheme: dark) { :root { --bg-base: #0a0a0b; --bg-card: #141416; --bg-elevated: #1c1c1f; --bg-input: #0f0f11; --bg-input-focus: rgba(220, 38, 38, 0.05); --accent-soft: rgba(220, 38, 38, 0.15); --accent-glow: rgba(220, 38, 38, 0.4); /* Status colors — dark values (brighter, for contrast on dark) */ --success: #22c55e; --success-strong: #16a34a; --warning: #eab308; --info: #3b82f6; --purple: #a78bfa; --cyan: #22d3ee; /* dark "empty table" fill — the saturated fills stay the same */ --table-available: #3a3a40; --bg-hover: #26262a; --gold: #d4a574; --gold-light: #e8c9a8; --text: #ffffff; --text-secondary: #a1a1aa; --text-muted: #52525b; --border: rgba(255, 255, 255, 0.08); --border-light: rgba(255, 255, 255, 0.12); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.5); --card-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) inset, 0 4px 24px rgba(0, 0, 0, 0.4), 0 12px 48px rgba(0, 0, 0, 0.3), 0 0 120px rgba(220, 38, 38, 0.08); --float-opacity: 0.06; --steam-opacity: 0.04; } }