/* ========================================================================== WINNR — DESIGN TOKENS Every color, font, and spacing value used across the site lives here. To reskin the whole product, you only ever need to change this file. ========================================================================== */ :root { /* ---- Color: base ---- */ --ink-950: #0D0F0E; /* near-black — page background */ --ink-900: #1B1F1D; /* charcoal — panels, cards */ --ink-800: #242923; /* raised charcoal — cards nested inside panels */ --ink-700: #2E332E; /* hairline borders */ --ink-600: #3A413A; /* hover borders */ /* ---- Color: signature accent ---- Lime is spent deliberately: grades, scores, recommendations, and primary actions ONLY. Everything else (labels, positions, borders) stays neutral so lime keeps meaning "this is good / this is the move." */ --lime-500: #B6F23A; --lime-400: #C9F567; /* hover / brighter state */ --lime-600: #93CC2E; /* pressed state */ --lime-500-10: rgba(182, 242, 58, 0.08); --lime-500-15: rgba(182, 242, 58, 0.15); --lime-500-35: rgba(182, 242, 58, 0.35); /* ---- Color: WINNR Score grade spectrum ---- Reserved for the score system specifically — never used decoratively. */ --grade-a: #B6F23A; /* 90–100 */ --grade-b: #D8E23A; /* 75–89 */ --grade-c: #F2C13A; /* 60–74 */ --grade-d: #F2903A; /* 45–59 */ --grade-f: #F2523A; /* <45 */ /* ---- Color: text (sage-tinted neutrals, not pure gray, to stay warm with the charcoal/lime palette rather than reading cold/mismatched) ---- */ --text-100: #F5F7F5; --text-300: #C7CDC5; --text-400: #93998F; /* Was #5C625A -- measured (real WCAG contrast math, not eyeballed) at only 2.36:1-3.07:1 against this site's dark backgrounds (ink-800/900/950), failing even the "large text" AA minimum (3:1) against ink-800/900, let alone the 4.5:1 normal-text minimum this token is often used at (--text-xs captions). Lightened just enough to clear 3:1 everywhere it's used (now 3.03-3.93:1), keeping the same subtle warm-gray hue and staying clearly darker than --text-400 -- fully reaching 4.5:1 would require going nearly as light as --text-400 itself, collapsing this site's two-tier muted- text system, which is a bigger change than a contrast spot-fix warrants. Any usage that needs full AA-normal compliance (real body-readable text, not a small caption/label) should use --text-400 or --text-300 instead — this token still isn't a complete fix for those cases. */ --text-600: #6C7369; /* ---- Type families ---- Display: Space Grotesk — geometric, technical, confident at large sizes Body: Inter — clean and legible for paragraphs and UI copy Data: IBM Plex Mono — scores, ADP, tables — precision over personality */ --font-display: 'Space Grotesk', 'Arial', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-data: 'IBM Plex Mono', ui-monospace, monospace; /* ---- Type scale (fluid) ---- */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: clamp(1.25rem, 1rem + 1vw, 1.75rem); --text-2xl: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); --text-3xl: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); --text-4xl: clamp(2.75rem, 1.8rem + 4.5vw, 5.25rem); /* ---- Spacing scale ---- */ --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-12: 3rem; --space-16: 4rem; --space-24: 6rem; /* ---- Layout ---- */ --container-max: 1240px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --border-hair: 1px solid var(--ink-700); /* ---- Shadows (added for the My Matchup visual-polish trial — see team-hub-matchup.css) ---- NEW tokens, additive only: nothing else in the codebase references these yet, so adding them here doesn't change how any existing page looks — they only take effect once a stylesheet opts in. Two-layer shadows (a soft, spread-out layer + a tighter, closer one) rather than a single flat drop-shadow — reads as more like real elevation against this site's near-black background than one blurry layer does. Low opacity black works on THIS dark theme specifically because the page background is already near-black (--ink-950) — a lighter theme would need a different approach entirely, worth knowing before this ever gets applied beyond a dark-mode page. */ --shadow-card: 0 8px 24px -8px rgba(0, 0, 0, 0.45), 0 2px 8px -2px rgba(0, 0, 0, 0.3); --shadow-card-hover: 0 14px 34px -10px rgba(0, 0, 0, 0.55), 0 4px 12px -2px rgba(0, 0, 0, 0.35); /* Added in the same page's later visual-REDESIGN pass ("player rows as raised mini-panels") -- a deliberately smaller, tighter shadow than --shadow-card for a small list-item-sized element rather than a full card; paired with a faint inset top highlight (set directly on the row rule, not baked into this token, since only rows use the inset) for a subtle "embossed/raised" read rather than "floating." */ --shadow-row: 0 3px 8px -3px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.25); --shadow-row-hover: 0 5px 14px -3px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3); /* ---- Bold elevation tiers (My Matchup BOLD redesign pass) ---- NEW, additive tokens -- nothing else in the codebase references them, so no other page's look changes. The EXISTING --ink-900/800/ 700/600 scale is real but genuinely subtle: computed CIE L* (perceptual lightness, 0-100) values are --ink-950=4.1, --ink-900= 11.3, --ink-800=15.9, --ink-700=20.6, --ink-600=26.7 -- a page- background-to-"card" jump of only ~7 points, too small to read as a clearly distinct surface at a glance (confirmed by computing it, not eyeballing hex codes). These 3 tokens are deliberately much bolder: --surface-1 #343A33 L*=23.7 (+19.6 over --ink-950's L*=4.1) --surface-2 #525A50 L*=37.3 (+13.6 over --surface-1) --surface-3 #687165 L*=46.6 (+9.3 over --surface-2) Same subtle warm-sage-charcoal HUE family as the existing ink scale (not a new hue) -- "use the existing charcoal tokens more boldly," not a new color. Real text contrast confirmed at every tier: white text (--text-100, #F5F7F5) is 10.84:1 against --surface-1, 6.64:1 against --surface-2, 4.71:1 against --surface-3 -- all clear WCAG AA's 4.5:1 normal-text minimum even at the lightest tier. */ --surface-1: #343A33; --surface-2: #525A50; --surface-3: #687165; /* ---- Secondary accent: teal (My Matchup BOLD redesign pass) ---- ONE new supporting color, per the task's own explicit ask -- a cool blue-green, deliberately a different HUE FAMILY from lime's warm yellow-green so the two read as clearly distinct colors, not two shades of the same one. Deliberately LESS luminous than lime (L*=71.8 vs. lime-500's L*=88.8) on purpose, so teal never competes with lime's existing meaning (winner/notable/hero score) -- it's for secondary signals instead: the losing side's accent, the margin bar's non-favored segment, position-chip/icon tints. Real contrast confirmed: 8.87:1 against the page background (--ink-950), 5.38:1 against the new --surface-1 card tier -- both clear WCAG AA's 4.5:1, so it's legible as real text/icon color, not just a decorative wash. Alpha variants follow the exact same naming/value convention as --lime-500-15/-35 already established above. */ --teal-500: #3FC1C9; --teal-500-15: rgba(63, 193, 201, 0.15); --teal-500-35: rgba(63, 193, 201, 0.35); /* ---- Motion ---- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 150ms; --dur-med: 450ms; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }