/* ============================================================================= Chief's Den — Design Tokens File: public/assets/css/tokens.css Single source of truth for the entire visual system. Every color, type size, spacing, shadow, and radius is defined here. ============================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* --------------------------------------------------------------------------- Color Palette — Core --------------------------------------------------------------------------- */ /* Backgrounds */ --color-bg: #0D0B08; /* warm near-black — main background */ --color-surface: #1A1610; /* dark walnut — cards, panels */ --color-surface-2: #221C14; /* slightly raised surface */ --color-surface-3: #2A2318; /* hover state surface */ --color-border: #2E2620; /* subtle divider */ --color-border-light: #3A3028; /* slightly lighter border */ /* Accent — Amber/Gold */ --color-accent: #C8860A; /* aged amber — primary CTA, highlights */ --color-accent-hi: #E8C070; /* burnished gold — hover, active */ --color-accent-dim: #8A5C07; /* dimmed amber — disabled, muted */ --color-accent-bg: #1A1200; /* amber tint background */ --color-accent-glow: rgba(200, 134, 10, 0.15); /* Text ------------------------------------------------------------------------- Contrast ratios below are measured against --color-surface (#1A1610), the card background most body text actually sits on. The bottom two were raised on 2026-09-03. They were failing WCAG AA badly, and the Den is read across a lit room, not at arm's length in the dark: --color-text-subtle #8A7D6A 4.48:1 (AA needs 4.5) --color-text-dim #5A504A 2.30:1 text-subtle is the token behind nearly every small uppercase label in the app — DISTILLERY, PROOF, MASH BILL, CURRENT MSRP — 331 usages of it, so it was the single biggest cause of "I can't read that from over there". Hue and saturation are unchanged; only lightness was raised, so the warm parchment character is intact. Keep every value here at 4.5:1 or better on --color-surface. If something needs to recede, use size or weight, not contrast that fails. */ --color-text: #F2EAD8; /* parchment — primary text 15.04:1 */ --color-text-muted: #B8A898; /* medium muted 7.80:1 */ --color-text-subtle: #9F9382; /* labels, captions 5.98:1 */ --color-text-dim: #8C7C73; /* furthest back, still readable 4.50:1 */ --color-text-inverse: #0D0B08; /* text on amber backgrounds */ /* Semantic */ --color-success: #2D5A2D; --color-success-text: #7EC87E; --color-success-bg: #0D1A0D; --color-danger: #8B1A1A; --color-danger-text: #E87878; --color-danger-bg: #1A0808; --color-warning: #7A5A00; --color-warning-text: #D4A830; --color-warning-bg: #1A1400; --color-info: #1A3A5A; --color-info-text: #78B4E8; --color-info-bg: #0A1A28; /* Tier colors */ --color-tier-daily: #4A4038; --color-tier-special: #3A3000; --color-tier-rare: #2A1A00; --color-tier-unicorn: #C8860A; /* gold — full amber for unicorn */ /* --------------------------------------------------------------------------- Typography --------------------------------------------------------------------------- */ --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace; /* Scale --text-xs went 11px -> 12px on 2026-09-03. It carries the small uppercase labels, which also have letter-spacing applied — and letter-spaced 11px caps are about the hardest thing on the page to read from across a room. One pixel is a small change to the layout and a large one to legibility at distance. Do not take it back down. */ --text-xs: 12px; --text-sm: 13px; --text-base: 15px; --text-md: 17px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 30px; --text-3xl: 38px; --text-4xl: 48px; --text-5xl: 64px; /* Weight */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; /* Leading */ --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed:1.65; /* --------------------------------------------------------------------------- Spacing Scale (base 4px) --------------------------------------------------------------------------- */ --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; /* --------------------------------------------------------------------------- Border Radius --------------------------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* --------------------------------------------------------------------------- Shadows --------------------------------------------------------------------------- */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7); /* Amber glow — used on featured items, active states */ --shadow-amber-sm: 0 0 8px rgba(200, 134, 10, 0.2); --shadow-amber-md: 0 0 20px rgba(200, 134, 10, 0.25); --shadow-amber-lg: 0 0 40px rgba(200, 134, 10, 0.3); /* --------------------------------------------------------------------------- Layout --------------------------------------------------------------------------- */ --sidebar-width: 240px; --sidebar-collapsed: 64px; --topbar-height: 56px; --content-max-width: 1280px; --content-padding: var(--space-6); /* Mobile tab bar */ --tabbar-height: 64px; /* TV dashboard safe zone */ --tv-safe-zone: 80px; /* --------------------------------------------------------------------------- Z-index Scale --------------------------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-scanner: 600; /* --------------------------------------------------------------------------- Transitions --------------------------------------------------------------------------- */ --transition-fast: 120ms ease; --transition-base: 180ms ease; --transition-slow: 300ms ease; --transition-page: 200ms ease; /* --------------------------------------------------------------------------- Scan overlay --------------------------------------------------------------------------- */ --scan-overlay-bg: rgba(13, 11, 8, 0.92); --scan-reticle: var(--color-accent); /* --------------------------------------------------------------------------- iOS / PWA --------------------------------------------------------------------------- */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); } /* --------------------------------------------------------------------------- Dark mode is the only mode — no light mode override needed. All values are already dark-optimized. --------------------------------------------------------------------------- */ /* Reduced motion — disable all animations for accessibility */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition-base: 0ms; --transition-slow: 0ms; --transition-page: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }