/* ============================================================ CHECKERS WEB APP — DESIGN TOKENS ============================================================ Canonical source for all visual constants. Referenced by styles.css. No selectors or rules — only :root custom properties. Token structure: 12 core colors | 5 font sizes | 7 spacing steps + game-specific semantic aliases WCAG AA Contrast Verification (8 pairs checked, all pass): #F0F0F0 on #1A1A2E → 14.97:1 ✅ #A0A0B0 on #1A1A2E → 6.62:1 ✅ #E2B45A on #1A1A2E → 8.86:1 ✅ #F0F0F0 on #16213E → 13.95:1 ✅ #0F0F1E on #E2B45A → 9.85:1 ✅ #22C55E on #1A1A2E → 7.49:1 ✅ #F59E0B on #1A1A2E → 7.94:1 ✅ #EF4444 on #1A1A2E → 4.53:1 ✅ ============================================================ */ :root { /* ========================================================== 1. COLORS (12 core tokens) ========================================================== */ /* --- 1.1 Primary — Brand Gold --- */ --color-primary-light: #F5D88C; /* Hover fills, soft highlight backgrounds */ --color-primary: #E2B45A; /* King crowns, focus rings, accent text (8.86:1 vs secondary) */ --color-primary-dark: #C49640; /* Pressed/active states, accent borders */ /* --- 1.2 Secondary — Deep Navy --- */ --color-secondary-light:#16213E; /* Panels, cards, modal — elevated surface */ --color-secondary: #1A1A2E; /* Page background — deepest visible layer */ --color-secondary-dark: #0F0F1E; /* Dark text on gold buttons, deepest shadows (9.85:1 vs primary) */ /* --- 1.3 Neutral — Text Tones --- */ --color-neutral-light: #F0F0F0; /* Primary text, headings (14.97:1 vs secondary) */ --color-neutral: #A0A0B0; /* Secondary text, labels, board coords (6.62:1 vs secondary) */ --color-neutral-dark: #6B6B7B; /* Borders, disabled states, decorative lines */ /* --- 1.4 Semantic — Status --- */ --color-success: #22C55E; /* Win state, positive feedback (7.49:1 vs secondary) */ --color-warning: #F59E0B; /* Caution, forced-jump cue (7.94:1 vs secondary) */ --color-error: #EF4444; /* Invalid move, loss state (4.53:1 vs secondary) */ /* ========================================================== 2. GAME-SPECIFIC SEMANTIC COLORS ========================================================== */ /* --- 2.1 Board --- */ --board-light: #F5DEB3; /* Light squares — wheat tone */ --board-dark: #8B6914; /* Dark squares — walnut tone (3.9:1 vs board-light) */ /* --- 2.2 Pieces --- */ --piece-player: #DC2626; /* Player pieces — rich red */ --piece-player-light: #EF4444; /* Radial gradient highlight */ --piece-player-dark: #991B1B; /* Radial gradient shadow */ --piece-ai: #1E1E1E; /* AI pieces — near-black (3.3:1 vs board-dark) */ --piece-ai-light: #404040; /* Radial gradient highlight */ --piece-ai-dark: #1A1A1A; /* Radial gradient shadow */ /* --- 2.3 Highlights (Game State Indicators) --- */ --highlight-selected: rgba(250, 204, 21, 0.7); /* Golden glow — selected piece */ --highlight-valid: rgba(34, 197, 94, 0.85); /* Green dot — valid destination */ --highlight-jump: rgba(239, 68, 68, 0.7); /* Red ring — forced jump */ --highlight-hint: rgba(59, 130, 246, 0.6); /* Blue glow — hint suggestion */ --highlight-last-move: rgba(226, 180, 90, 0.18); /* Subtle gold — last move trace */ /* --- 2.4 Semantic Variants (borders, darker accents) --- */ --success-dark: #16A34A; /* Darker success for borders */ --warning-dark: #D97706; /* Darker warning for borders */ --error-dark: #DC2626; /* Darker error for borders only */ /* ========================================================== 3. TYPOGRAPHY ========================================================== */ /* --- 3.1 Font Families --- */ --font-display: 'Georgia', 'Times New Roman', serif; --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'Consolas', 'Courier New', monospace; /* --- 3.2 Font Sizes (5 steps, ≈1.25 modular ratio, base 1rem) --- */ --font-size-xs: 0.75rem; /* 12px — board edge labels */ --font-size-sm: 0.875rem; /* 14px — difficulty label, stats, status bar */ --font-size-base: 1rem; /* 16px — body text, buttons, turn indicator */ --font-size-lg: 1.5rem; /* 24px — modal subheading, section titles */ --font-size-xl: 2rem; /* 32px — game title, modal result title */ /* --- 3.3 Line Heights --- */ --line-height-tight: 1.2; /* Headings, single-line labels */ --line-height-normal: 1.5; /* Body text, buttons */ --line-height-relaxed: 1.8; /* Multi-line stats in modal */ /* --- 3.4 Font Weights --- */ --font-weight-normal: 400; /* Body text, labels */ --font-weight-semibold: 600; /* Turn indicator, buttons */ --font-weight-bold: 700; /* Game title, modal result */ /* ========================================================== 4. SPACING (4px base grid, 7 steps) ========================================================== */ --space-1: 0.25rem; /* 4px — captured-piece gaps, icon micro-margins */ --space-2: 0.5rem; /* 8px — inner padding, label-to-board gap */ --space-3: 0.75rem; /* 12px — button padding-block, medium gaps */ --space-4: 1rem; /* 16px — section gaps, standard padding */ --space-6: 1.5rem; /* 24px — header padding, major section spacing */ --space-8: 2rem; /* 32px — modal internal padding, large gaps */ --space-12: 3rem; /* 48px — layout block separation, outer margins */ /* --- 4.1 Semantic Spacing Aliases --- */ --spacing-xs: var(--space-1); /* 4px */ --spacing-sm: var(--space-2); /* 8px */ --spacing-md: var(--space-4); /* 16px */ --spacing-lg: var(--space-6); /* 24px */ --spacing-xl: var(--space-8); /* 32px */ /* ========================================================== 5. BORDER RADII ========================================================== */ --radius-sm: 4px; /* Board grid corners, small elements */ --radius-md: 6px; /* Buttons (New Game, Play Again) */ --radius-lg: 12px; /* Modal dialog, card containers */ --radius-full: 50%; /* Pieces, captured dots, valid-move dots */ /* ========================================================== 6. SHADOWS ========================================================== */ /* --- 6.1 Elevation Tiers --- */ --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.5); --shadow-strong: 0 4px 12px rgba(0, 0, 0, 0.6); /* --- 6.2 Game-Specific Shadows --- */ --shadow-glow-selected: 0 0 15px 5px var(--highlight-selected); --shadow-piece-3d: inset 0 -3px 6px rgba(0, 0, 0, 0.4), inset 0 3px 6px rgba(255, 255, 255, 0.15), 0 2px 4px rgba(0, 0, 0, 0.5); --shadow-piece-hover: inset 0 -3px 6px rgba(0, 0, 0, 0.4), inset 0 3px 6px rgba(255, 255, 255, 0.15), 0 4px 12px rgba(0, 0, 0, 0.6); /* ========================================================== 7. TRANSITIONS ========================================================== */ /* --- 7.1 Duration Tiers --- */ --transition-fast: 150ms ease; /* Hover/focus, micro-interactions */ --transition-normal: 300ms ease-out; /* Piece slide, selection glow */ --transition-slow: 500ms ease-in-out; /* Modal entrance, game-over overlay */ /* --- 7.2 Component-Specific Shorthands --- */ --transition-piece: transform 300ms ease-out, box-shadow 200ms ease, opacity 250ms ease-in; --transition-fade: opacity 300ms ease; --transition-color: color 200ms ease, background-color 200ms ease; }