/* ========================================================================== TKNMINE Design Tokens v1.0 Single source of truth for color, typography, and surface values. Built from an audit of actual values in use across 38 platform files — not invented. See brand-guidelines.md for usage rules. ========================================================================== */ :root { /* ---- Brand (from the finalized logo system) ---- */ --brand-primary: #E8452C; /* vermillion — the approved brand color */ --brand-ink: #0B1220; /* ink-navy, from logo lockup */ --brand-paper: #F5F4F1; /* light lockup background, from logo system */ /* ---- Gold accent — resolved via WCAG contrast testing ---- */ --gold-primary: #c9a84c; /* 8.71:1 on dark surfaces — use only on theme-dark. Fails on light surfaces (2.29:1) — never use here. */ --gold-institutional: #96760a; /* 4.64:1 on dark, 4.29:1 on light — use on theme-light for large text/UI elements/buttons only. At 4.29:1 it does not clear the 4.5:1 bar for small body text on light backgrounds — use a darker neutral text color for body copy instead. */ /* ---- Dark experience (application / product layer) ---- */ --surface-dark: #08090d; /* dominant value, 24 files. The former secondary value (#070b14, found in 7 files) tested at a 1.01:1 contrast ratio against this — imperceptibly different, confirmed as accidental drift, not intentional. Deprecated; converge all files to --surface-dark during migration. */ --surface-dark-card: #13141f; --surface-dark-card-alt: #181a28; --border-dark: rgba(255,255,255,0.08); --text-dark-primary: #f0f4ff; --text-dark-secondary: #a8b4cc; --text-dark-tertiary: #6b7a96; --text-dark-quaternary: #4a5568; /* ---- Light experience (institutional / public layer) ---- */ --surface-light: #ffffff; --surface-light-soft: #f7f7f5; /* for card/section backgrounds — avoids "unfinished" feel of pure white used everywhere */ --border-light: rgba(0,0,0,0.08); --text-light-primary: #111111; --text-light-secondary: #4b5563; /* ---- Semantic status colors (values already in common use) ---- */ --status-success: #22c55e; --status-success-bg: rgba(34,197,94,0.10); --status-warning: #f59e0b; --status-warning-bg: rgba(245,158,11,0.10); --status-error: #ef4444; --status-error-bg: rgba(239,68,68,0.10); --status-info: #3b82f6; --status-info-bg: rgba(59,130,246,0.10); /* ---- Typography ---- Display: brand headlines, hero sections, nav wordmark — matches the finalized logo system. Replaces Playfair Display, which was filling this same role unofficially across most files. Body: all reading content, paragraphs, descriptions. Mono: code, technical labels, data, badges — already the dominant convention, just needs consistent variable usage instead of sometimes-hardcoded font-family strings. ---------------------------------------------------------------------- */ --font-display: 'Space Grotesk', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; /* ---- Spacing scale (for future component migration) ---- */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; /* ---- Radius ---- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; } /* ========================================================================== Theme context classes — apply one of these to per page's role. This is the mechanism that replaces "36 files, 36 hardcoded palettes" with one file and a single class switch per page. ========================================================================== */ body.theme-dark { background: var(--surface-dark); color: var(--text-dark-primary); } body.theme-light { background: var(--surface-light); color: var(--text-light-primary); } /* Both open design-token questions have been resolved via WCAG contrast testing — see the gold accent and --surface-dark comments above for the confirmed rules and the reasoning behind them. */