/** * tokens.css — SoChoosey design system tokens * * Single source of truth for every CSS custom property in the app. * Load this file before all other stylesheets. * Never use raw color, spacing, or radius values in component CSS — * always reference a token defined here. */ /* ═══════════════════════════════════════════════════════════════════════════ LIGHT MODE (default :root) ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Brand colors ───────────────────────────────────────────────────────── Primary: deep violet #6C47FF Secondary: coral #FF6B6B These two anchor the hero gradient and define all energetic moments. */ --color-primary: #6C47FF; --color-primary-hover: #5835E8; --color-primary-active: #4525D0; --color-primary-light: #EDE9FF; /* Tinted fill: chips, hover states */ --color-secondary: #FF6B6B; --color-secondary-hover: #E85555; --color-secondary-light: #FFE9E9; --color-success: #2DD4A7; --color-success-hover: #22B891; --color-success-light: #E6FBF5; --color-warning: #FFB830; --color-warning-hover: #E8A020; --color-warning-light: #FFF5DC; --color-error: #E53E3E; --color-error-hover: #C53030; --color-error-light: #FFF5F5; /* ── Gradients ──────────────────────────────────────────────────────────── Hero: violet → coral. Used in the nav logo, overlays, and the spin button. */ --gradient-hero: linear-gradient(135deg, #6C47FF 0%, #FF6B6B 100%); --gradient-hero-subtle: linear-gradient( 135deg, rgba(108, 71, 255, 0.08) 0%, rgba(255, 107, 107, 0.08) 100% ); --gradient-primary: linear-gradient(135deg, #6C47FF 0%, #8B67FF 100%); /* ── Page surfaces — light mode ─────────────────────────────────────────── bg: the page background. surface: cards and panels — slightly violet-tinted, softer than white. surface-raised: elements visually above the surface (dropdowns, modals). surface-inset: recessed areas (text inputs, code blocks). */ --color-bg: #FFFFFF; --color-surface: #F8F7FF; --color-surface-raised: #FFFFFF; --color-surface-inset: #F0EEF9; --color-overlay: rgba(15, 13, 26, 0.72); /* celebration backdrop */ /* ── Text — light mode ────────────────────────────────────────────────────*/ --color-text: #1A1333; /* Near-black with violet undertone */ --color-text-muted: #6B6B8A; /* Secondary labels, hints, captions */ --color-text-inverse: #FFFFFF; /* Text on primary / dark backgrounds */ /* ── Borders — light mode ─────────────────────────────────────────────────*/ --color-border: #E2E0F0; --color-border-strong: #C4C0E0; --color-border-focus: #6C47FF; /* Focus ring matches primary */ /* ── Wheel / animation segment palette ──────────────────────────────────── 12 distinct colors for wheel segments, lottery balls, and dice faces. Chosen to be vibrant and distinguishable, cohesive with the brand. */ --color-seg-1: #6C47FF; --color-seg-2: #FF6B6B; --color-seg-3: #2DD4A7; --color-seg-4: #FFB830; --color-seg-5: #4ECDC4; --color-seg-6: #FF8C42; --color-seg-7: #A855F7; --color-seg-8: #3B82F6; --color-seg-9: #EC4899; --color-seg-10: #10B981; --color-seg-11: #F59E0B; --color-seg-12: #EF4444; /* ── Typography — font stacks ───────────────────────────────────────────── Nunito: display text and headings — playful, rounded, energetic. Inter: body and UI text — neutral, highly legible at small sizes. */ --font-display: 'Nunito', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; /* ── Typography — weight scale ────────────────────────────────────────────*/ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* ── Typography — size scale ────────────────────────────────────────────── Base: 1rem = 16px (user's browser default, user-adjustable). Scale loosely follows the Major Third modular ratio (×1.25). All values in rem so they respect user-defined browser font size. xs 12px — fine print, timestamps sm 14px — secondary labels, form hints base 16px — body copy, default UI text lg 18px — lead text, large labels xl 20px — card headings 2xl 24px — section headings 3xl 30px — page headings 4xl 36px — large display 5xl 48px — winner name, hero reveal */ --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: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; /* ── Typography — line height ─────────────────────────────────────────────*/ --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; /* ── Spacing — 4px base grid ────────────────────────────────────────────── All spacing values are multiples of 0.25rem (4px at a 16px base). Use --space-N everywhere for padding, margin, and gap. Never hardcode pixel values in component CSS. --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 --space-20 80px --space-24 96px */ --space-0: 0; --space-px: 1px; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* ── Border radius ──────────────────────────────────────────────────────── sm 4px — tight: chips, badges md 8px — inputs, small cards lg 12px — panels, larger cards xl 16px — modals, stage area 2xl 24px — large overlays full pill — preset list buttons, value tags */ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 9999px; /* ── Shadows ────────────────────────────────────────────────────────────── Two-layer construction: a violet-tinted ambient shadow paired with a neutral key shadow. The violet tint ties shadows to the brand palette on light backgrounds. Dark mode overrides replace these with pure black shadows since violet tint is invisible on dark surfaces. */ --shadow-sm: 0 1px 2px rgba(108, 71, 255, 0.06), 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 6px rgba(108, 71, 255, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px rgba(108, 71, 255, 0.10), 0 4px 6px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px rgba(108, 71, 255, 0.12), 0 10px 10px rgba(0, 0, 0, 0.04); --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-focus: 0 0 0 3px rgba(108, 71, 255, 0.35); /* Focus ring glow */ /* ── Z-index ────────────────────────────────────────────────────────────── Ordered named scale. All z-index values must come from here. Never hardcode a z-index number in component CSS. */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; /* ── Motion ─────────────────────────────────────────────────────────────── Standard easing and duration tokens for UI micro-transitions. Spin and celebration animation timing lives in animations.js. */ --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; --transition-slower: 500ms ease; /* ── Layout ───────────────────────────────────────────────────────────────*/ --nav-height: 3.75rem; /* 60px */ --list-col-width: 22.5rem; /* 360px */ --container-max: 80rem; /* 1280px */ --stage-min-height: 25rem; /* 400px */ } /* ═══════════════════════════════════════════════════════════════════════════ DARK MODE OVERRIDES Three theme modes are supported, controlled by settings.js: System — no [data-theme] on , follows prefers-color-scheme Light — [data-theme="light"], forces light regardless of OS setting Dark — [data-theme="dark"], forces dark regardless of OS setting The token block is repeated twice below (system + explicit) because CSS has no native way to share values between an @media rule and a selector without a preprocessor, which this project does not use. If you update a dark value, update it in both blocks. ═══════════════════════════════════════════════════════════════════════════ */ /* -- System dark preference ------------------------------------------------ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #0F0D1A; --color-surface: #1A1630; --color-surface-raised: #251F40; --color-surface-inset: #0A0814; --color-overlay: rgba(15, 13, 26, 0.88); --color-text: #F0EEFF; --color-text-muted: #9490C0; --color-border: #2D2650; --color-border-strong: #4A4070; --color-border-focus: #8B67FF; --color-primary-hover: #7A5AFF; --color-primary-light: rgba(108, 71, 255, 0.20); --color-secondary-light: rgba(255, 107, 107, 0.20); --color-success-light: rgba(45, 212, 167, 0.15); --color-warning-light: rgba(255, 184, 48, 0.15); --color-error-light: rgba(229, 62, 62, 0.15); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.20); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.45), 0 4px 6px rgba(0, 0, 0, 0.15); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.50), 0 10px 10px rgba(0, 0, 0, 0.12); --shadow-focus: 0 0 0 3px rgba(139, 103, 255, 0.40); } } /* -- Explicit dark theme ---------------------------------------------------- */ [data-theme="dark"] { --color-bg: #0F0D1A; --color-surface: #1A1630; --color-surface-raised: #251F40; --color-surface-inset: #0A0814; --color-overlay: rgba(15, 13, 26, 0.88); --color-text: #F0EEFF; --color-text-muted: #9490C0; --color-border: #2D2650; --color-border-strong: #4A4070; --color-border-focus: #8B67FF; --color-primary-hover: #7A5AFF; --color-primary-light: rgba(108, 71, 255, 0.20); --color-secondary-light: rgba(255, 107, 107, 0.20); --color-success-light: rgba(45, 212, 167, 0.15); --color-warning-light: rgba(255, 184, 48, 0.15); --color-error-light: rgba(229, 62, 62, 0.15); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.20); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.45), 0 4px 6px rgba(0, 0, 0, 0.15); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.50), 0 10px 10px rgba(0, 0, 0, 0.12); --shadow-focus: 0 0 0 3px rgba(139, 103, 255, 0.40); }