/* ══════════════════════════════════════════════════════════════════════ SmartQR — Web design tokens. Single source of truth for every colour / spacing / radius / duration used in `main.css` (public) and `admin.css` (admin panel). Shape- compatible with `flutter_app/lib/config/tokens.dart`: both reference the same DESIGN_SYSTEM.md. Four skins, selected via the `data-theme` attribute on ``: - classic-light (default) - classic-dark - orange-light - orange-dark `` gets the attribute set by `theme-boot.js` before first paint, reading the `smartqr_theme` cookie and falling back to `prefers-color-scheme`. ══════════════════════════════════════════════════════════════════════ */ /* ── Shared (all skins) ─────────────────────────────────────────── */ :root { /* Spacing (4 px grid) */ --sq-space-xxs: 2px; --sq-space-xs: 4px; --sq-space-sm: 8px; --sq-space-md: 16px; --sq-space-lg: 24px; --sq-space-xl: 40px; --sq-space-xxl: 48px; --sq-space-hero: 102px; /* Radius */ --sq-radius-pill: 9999px; --sq-radius-button: 12px; --sq-radius-input: 12px; --sq-radius-card-tight: 16px; --sq-radius-card: 18px; --sq-radius-hero: 40px; /* Motion */ --sq-duration-fast: 150ms; --sq-duration-normal: 300ms; --sq-duration-slow: 500ms; --sq-duration-ambient: 2000ms; --sq-easing-standard: cubic-bezier(0.4, 0, 0.2, 1); --sq-easing-decelerate: cubic-bezier(0, 0, 0.2, 1); --sq-easing-accelerate: cubic-bezier(0.4, 0, 1, 1); /* Opacity scale */ --sq-opacity-disabled: 0.38; --sq-opacity-hint: 0.60; --sq-opacity-secondary: 0.70; --sq-opacity-enabled: 0.87; --sq-opacity-primary: 1.00; /* Font stacks */ --sq-font-sans: "Inter", "DM Sans", "system-ui", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --sq-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } /* ── Classic Light (DEFAULT — unchanged on upgrade) ──────────────── */ :root, [data-theme="classic-light"] { --sq-accent: #00C48C; --sq-accent-hover: #00D49A; --sq-accent-pressed: #00A478; --sq-accent-surface: rgba(0, 196, 140, 0.08); --sq-bg: #F5F7FA; --sq-surface: #FFFFFF; --sq-surface-elev: #F0F3F7; --sq-surface-alt: #E8EDF2; --sq-text-primary: #1A2332; --sq-text-secondary: #455668; --sq-text-dim: #6B7A8D; --sq-divider: rgba(0, 0, 0, 0.24); --sq-divider-soft: rgba(0, 0, 0, 0.12); --sq-success: #00C853; --sq-warning: #F59E0B; --sq-error: #FF5252; --sq-danger: #EF4444; --sq-brand-shadow: rgba(0, 196, 140, 0.25); --sq-shadow-e1: 0 1px 2px rgba(0, 0, 0, 0.04); --sq-shadow-e2: 0 8px 24px -6px rgba(120, 140, 130, 0.18); } /* ── Classic Dark (unchanged existing) ──────────────────────────── */ [data-theme="classic-dark"] { --sq-accent: #00E5A0; --sq-accent-hover: #00F0B0; --sq-accent-pressed: #00C48C; --sq-accent-surface: rgba(0, 229, 160, 0.24); --sq-bg: #0F1923; --sq-surface: #172533; --sq-surface-elev: #1E3044; --sq-surface-alt: #1B2F42; --sq-text-primary: #F0F4F8; --sq-text-secondary: #B4C0CC; --sq-text-dim: #8A9BAC; --sq-divider: rgba(255, 255, 255, 0.20); --sq-divider-soft: rgba(255, 255, 255, 0.12); --sq-success: #00C853; --sq-warning: #FFB300; --sq-error: #FF5252; --sq-danger: #FF6B6B; --sq-brand-shadow: rgba(0, 229, 160, 0.32); --sq-shadow-e1: 0 1px 2px rgba(0, 0, 0, 0.50); --sq-shadow-e2: 0 8px 24px -6px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04); } /* ── Orange Light (skill DESIGN.md — glassy orange) ──────────────── */ [data-theme="orange-light"] { --sq-accent: #F97316; --sq-accent-hover: #FB9A57; --sq-accent-pressed: #D66313; --sq-accent-surface: rgba(249, 115, 22, 0.10); --sq-bg: #FFFFFF; --sq-surface: #EAE6DB; --sq-surface-elev: #F5F3EC; --sq-surface-alt: #E8E3D4; --sq-text-primary: #292524; --sq-text-secondary: #57534E; --sq-text-dim: #A8A29E; --sq-divider: #E7E5E4; --sq-divider-soft: #F5F5F4; --sq-success: #10B981; --sq-warning: #F59E0B; --sq-error: #EF4444; --sq-danger: #DC2626; --sq-brand-shadow: rgba(249, 115, 22, 0.30); --sq-shadow-e1: 0 1px 2px rgba(180, 170, 160, 0.15); --sq-shadow-e2: 0 8px 24px -6px rgba(180, 170, 160, 0.30), inset 0 2px 4px rgba(255, 255, 255, 0.80); } /* ── Orange Dark (skill DESIGN-dark.md — warm charcoal) ──────────── */ [data-theme="orange-dark"] { --sq-accent: #F97316; --sq-accent-hover: #FB9A57; --sq-accent-pressed: #D66313; --sq-accent-surface: rgba(249, 115, 22, 0.18); --sq-bg: #0A0A0A; --sq-surface: #161615; --sq-surface-elev: #1F1E1C; --sq-surface-alt: #252220; --sq-text-primary: #F5F3EC; --sq-text-secondary: #D6D3CE; --sq-text-dim: #A8A29E; --sq-divider: #2A2826; --sq-divider-soft: #1F1E1C; --sq-success: #10B981; --sq-warning: #F59E0B; --sq-error: #EF4444; --sq-danger: #DC2626; --sq-brand-shadow: rgba(249, 115, 22, 0.40); --sq-shadow-e1: 0 1px 2px rgba(0, 0, 0, 0.50); --sq-shadow-e2: 0 8px 24px -6px rgba(0, 0, 0, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.04); } /* ── System-driven fallback (when cookie absent) ─────────────────── */ @media (prefers-color-scheme: dark) { /* If the boot script didn't set data-theme (e.g. JS disabled), still give the user a dark experience with the default variant. */ :root:not([data-theme]) { color-scheme: dark; --sq-accent: #00E5A0; --sq-accent-hover: #00F0B0; --sq-accent-pressed: #00C48C; --sq-accent-surface: rgba(0, 229, 160, 0.24); --sq-bg: #0F1923; --sq-surface: #172533; --sq-surface-elev: #1E3044; --sq-surface-alt: #1B2F42; --sq-text-primary: #F0F4F8; --sq-text-secondary: #B4C0CC; --sq-text-dim: #8A9BAC; --sq-divider: rgba(255, 255, 255, 0.20); --sq-divider-soft: rgba(255, 255, 255, 0.12); --sq-shadow-e1: 0 1px 2px rgba(0, 0, 0, 0.50); --sq-shadow-e2: 0 8px 24px -6px rgba(0, 0, 0, 0.55); } } /* ── Motion respect — users who asked the OS to reduce motion ───── */ @media (prefers-reduced-motion: reduce) { :root { --sq-duration-fast: 0ms; --sq-duration-normal: 0ms; --sq-duration-slow: 0ms; /* Keep ambient at a slow pace rather than frozen — full-stop looks broken. Spec allows "reasonable reduction". */ --sq-duration-ambient: 4000ms; } }