/* ============================================================ QR Carts — Design Tokens Supports light and dark mode via prefers-color-scheme and a manual toggle via [data-theme="dark"] on . ============================================================ */ :root { /* ── Color Palette (Light) ── */ --color-primary: hsl(234, 85%, 55%); --color-primary-light: hsl(234, 85%, 65%); --color-primary-dark: hsl(234, 85%, 42%); --color-primary-alpha: hsla(234, 85%, 55%, 0.12); --color-accent: hsl(28, 95%, 58%); --color-accent-light: hsl(28, 95%, 68%); --color-success: hsl(152, 60%, 42%); --color-success-light: hsl(152, 60%, 92%); --color-danger: hsl(0, 72%, 56%); --color-danger-light: hsl(0, 72%, 94%); --color-warning: hsl(40, 90%, 50%); /* ── Surfaces ── */ --bg-base: hsl(220, 20%, 97%); --bg-surface: hsl(0, 0%, 100%); --bg-surface-raised: hsl(0, 0%, 100%); --bg-overlay: hsla(220, 20%, 10%, 0.5); /* ── Text ── */ --text-primary: hsl(220, 25%, 12%); --text-secondary: hsl(220, 10%, 44%); --text-tertiary: hsl(220, 10%, 62%); --text-on-primary: hsl(0, 0%, 100%); --text-on-accent: hsl(0, 0%, 100%); /* ── Borders ── */ --border-color: hsl(220, 15%, 88%); --border-color-light: hsl(220, 15%, 93%); /* ── Shadows ── */ --shadow-sm: 0 1px 2px hsla(220, 20%, 10%, 0.05); --shadow-md: 0 4px 12px hsla(220, 20%, 10%, 0.08); --shadow-lg: 0 8px 30px hsla(220, 20%, 10%, 0.12); --shadow-xl: 0 16px 50px hsla(220, 20%, 10%, 0.16); /* ── Spacing ── */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; /* ── Radii ── */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* ── Typography ── */ --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-heading: 'Outfit', 'Inter', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 2rem; /* ── Transitions ── */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; /* ── Z-Index ── */ --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; /* ── Bottom Nav Height ── */ --nav-height: 64px; --safe-area-bottom: env(safe-area-inset-bottom, 0px); } /* ── Dark Mode ── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg-base: hsl(225, 20%, 8%); --bg-surface: hsl(225, 18%, 13%); --bg-surface-raised: hsl(225, 16%, 17%); --bg-overlay: hsla(225, 20%, 4%, 0.7); --text-primary: hsl(220, 15%, 92%); --text-secondary: hsl(220, 10%, 60%); --text-tertiary: hsl(220, 10%, 44%); --border-color: hsl(225, 15%, 22%); --border-color-light: hsl(225, 15%, 18%); --shadow-sm: 0 1px 2px hsla(225, 30%, 4%, 0.3); --shadow-md: 0 4px 12px hsla(225, 30%, 4%, 0.4); --shadow-lg: 0 8px 30px hsla(225, 30%, 4%, 0.5); --shadow-xl: 0 16px 50px hsla(225, 30%, 4%, 0.6); --color-primary-alpha: hsla(234, 85%, 55%, 0.18); --color-success-light: hsla(152, 60%, 42%, 0.15); --color-danger-light: hsla(0, 72%, 56%, 0.15); } } /* Manual dark mode override */ [data-theme="dark"] { --bg-base: hsl(225, 20%, 8%); --bg-surface: hsl(225, 18%, 13%); --bg-surface-raised: hsl(225, 16%, 17%); --bg-overlay: hsla(225, 20%, 4%, 0.7); --text-primary: hsl(220, 15%, 92%); --text-secondary: hsl(220, 10%, 60%); --text-tertiary: hsl(220, 10%, 44%); --border-color: hsl(225, 15%, 22%); --border-color-light: hsl(225, 15%, 18%); --shadow-sm: 0 1px 2px hsla(225, 30%, 4%, 0.3); --shadow-md: 0 4px 12px hsla(225, 30%, 4%, 0.4); --shadow-lg: 0 8px 30px hsla(225, 30%, 4%, 0.5); --shadow-xl: 0 16px 50px hsla(225, 30%, 4%, 0.6); --color-primary-alpha: hsla(234, 85%, 55%, 0.18); --color-success-light: hsla(152, 60%, 42%, 0.15); --color-danger-light: hsla(0, 72%, 56%, 0.15); } /* Manual light mode override */ [data-theme="light"] { --bg-base: hsl(220, 20%, 97%); --bg-surface: hsl(0, 0%, 100%); --bg-surface-raised: hsl(0, 0%, 100%); --bg-overlay: hsla(220, 20%, 10%, 0.5); --text-primary: hsl(220, 25%, 12%); --text-secondary: hsl(220, 10%, 44%); --text-tertiary: hsl(220, 10%, 62%); --border-color: hsl(220, 15%, 88%); --border-color-light: hsl(220, 15%, 93%); --shadow-sm: 0 1px 2px hsla(220, 20%, 10%, 0.05); --shadow-md: 0 4px 12px hsla(220, 20%, 10%, 0.08); --shadow-lg: 0 8px 30px hsla(220, 20%, 10%, 0.12); --shadow-xl: 0 16px 50px hsla(220, 20%, 10%, 0.16); }