/* * Gym OS design tokens (SPEC §20) — ported verbatim from the Tailwind build. * * Premium, minimal, fitness-oriented. Dark is the primary look — a gym floor is dim and * members read their QR one-handed — but light is fully supported, not an afterthought. * * Status colours are semantic and never reused for decoration: at the door, colour is read * before text, so "green" must only ever mean "admitted" (docs/qr-security.md §4). * * The theme is switched by a `dark` class on , applied before first paint by * js/theme.js so a dark-mode member never gets a white flash. */ :root { --background: oklch(0.985 0.002 250); --surface: oklch(1 0 0); --surface-raised: oklch(0.975 0.003 250); --border: oklch(0.9 0.005 250); --border-strong: oklch(0.82 0.008 250); --foreground: oklch(0.18 0.012 258); --muted: oklch(0.52 0.014 258); --faint: oklch(0.68 0.012 258); /* Electric lime: the single accent. Used for primary actions and progress only. */ --accent: oklch(0.78 0.19 118); --accent-hover: oklch(0.73 0.19 118); --accent-foreground: oklch(0.16 0.02 120); --ring: oklch(0.78 0.19 118 / 0.5); --success: oklch(0.65 0.16 155); --success-soft: oklch(0.94 0.05 155); --warning: oklch(0.76 0.15 78); --warning-soft: oklch(0.95 0.06 84); --danger: oklch(0.58 0.21 25); --danger-soft: oklch(0.94 0.05 25); --info: oklch(0.66 0.13 235); --info-soft: oklch(0.94 0.04 235); --radius: 0.875rem; --font-sans: Inter, system-ui, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace; /* An accent wash for tinted panels — the Tailwind build wrote these as bg-accent/10. */ --accent-wash: oklch(0.78 0.19 118 / 0.1); --accent-wash-strong: oklch(0.78 0.19 118 / 0.15); color-scheme: light; } .dark { --background: oklch(0.16 0.008 258); --surface: oklch(0.204 0.01 258); --surface-raised: oklch(0.245 0.012 258); --border: oklch(0.295 0.012 258); --border-strong: oklch(0.38 0.015 258); --foreground: oklch(0.97 0.003 250); --muted: oklch(0.72 0.012 258); --faint: oklch(0.56 0.013 258); --accent: oklch(0.85 0.2 120); --accent-hover: oklch(0.89 0.2 120); --accent-foreground: oklch(0.17 0.03 122); --ring: oklch(0.85 0.2 120 / 0.55); --success: oklch(0.75 0.17 155); --success-soft: oklch(0.3 0.07 155); --warning: oklch(0.82 0.15 80); --warning-soft: oklch(0.33 0.07 75); --danger: oklch(0.68 0.19 24); --danger-soft: oklch(0.31 0.09 22); --info: oklch(0.72 0.13 235); --info-soft: oklch(0.3 0.07 235); --accent-wash: oklch(0.85 0.2 120 / 0.1); --accent-wash-strong: oklch(0.85 0.2 120 / 0.15); color-scheme: dark; }