/* ══════════════════════════════════════════════════════════════════════ * PrideRecruit Design System — SINGLE SOURCE OF TRUTH * ---------------------------------------------------------------------- * All fonts, sizes, colors, and shadow values MUST be defined here. * Reference them via var(--token) from anywhere else in the codebase. * * Do NOT hardcode: * - hex values (#f0b429) → use var(--gold) * - raw font names ('Syne', ...) → use var(--font-display) * - off-scale font sizes (11px) → use var(--text-xs) * * The design-audit script (scripts/design-audit.js) will flag any drift * introduced anywhere else. Run `node scripts/design-audit.js --summary` * before committing UI changes. * ══════════════════════════════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box;} :root{ /* ── Raw palette ────────────────────────────────────────────────── */ --ink:#09111F;--ink2:#111B2E;--ink3:#192540;--ink4:#1E2E4A; --gold:#F0B429;--gold2:#FFD878;--gold3:#7A5C00; --slate:#4B5A72;--mist:#8496B0;--fog:#C2CDDE;--snow:#EEF0F4; --border:rgba(240,180,41,.13);--border2:rgba(255,255,255,.07); --card:rgba(17,27,46,.92); /* ── Fonts ─────────────────────────────────────────────────────── */ --font-display:'Syne',sans-serif; --font-body:'Instrument Sans',sans-serif; --font-mono:'JetBrains Mono',monospace; /* Legacy aliases — do not remove, keeps existing pages working */ --syne:var(--font-display); --sans:var(--font-body); --mono:var(--font-mono); /* ── Type scale (any font-size outside this set is a bug) ──────── */ --text-xs:12px; /* uppercase labels, badge text, timestamps */ --text-sm:14px; /* secondary body, dense tables */ --text-base:16px; /* primary body */ --text-md:18px; /* subheadings, card titles */ --text-lg:22px; /* section headings */ --text-xl:28px; /* page headings */ --text-2xl:36px; /* hero, landing */ /* ── Semantic tokens (used by components; light mode overrides these) ── */ --bg-app:var(--ink); --bg-surface:var(--ink2); --bg-surface-2:var(--ink3); --bg-card:var(--card); --bg-hover:rgba(255,255,255,.05); --text-primary:var(--snow); --text-secondary:var(--mist); --text-muted:#6B7A92; /* was var(--slate) #4B5A72 → 2.8:1, fails AA. #6B7A92 = 4.6:1 on --ink */ --text-on-accent:var(--ink); --border-subtle:var(--border2); --border-accent:var(--border); --accent:var(--gold); --accent-hover:var(--gold2); --focus-ring:var(--gold); --success:#6FDB6F;--success-bg:rgba(76,175,80,.15); --danger:#EF4444; --shadow-card:0 4px 20px rgba(0,0,0,.35); --shadow-card-hover:0 6px 24px rgba(0,0,0,.35); --shadow-lg:0 16px 48px rgba(0,0,0,.35); /* Hero / dramatic surface tokens — dark mode defaults (light mode overrides below). */ --hero-bg:linear-gradient(135deg,var(--ink2) 0%,var(--ink3) 60%,#1a2f55 100%); --hero-text:#FFFFFF; --hero-accent:var(--gold); --hero-muted:var(--mist); --saved-bg:rgba(240,180,41,.06); --saved-border:rgba(240,180,41,.5); --saved-accent:var(--gold); color-scheme:dark; } /* Light theme — warm collegiate ivory. Echoes the gold accent so the brand * stays cohesive with dark mode. Ivory background makes white cards pop and * tones the gold down so it doesn't burn on screen. Navy text preserves the * dual-color (navy + gold) identity of the dark theme. * Activated via . */ [data-theme="light"]{ /* ── Raw palette overrides ────────────────────────────────────── * Pages that use raw tokens (var(--ink2), var(--snow), etc.) directly * in their inline styles need these flipped so they don't render as * dark surfaces/text on a light background. * * --ink flips to ivory in light mode because it's used almost exclusively * as TEXT-ON-GOLD-BUTTON across the codebase (.nav-tab.active, .add-btn, * .modal-register, PRO badges, etc. all do `color:var(--ink); background: * var(--gold);`). Dark mode: navy text on yellow-gold ✓. Light mode without * this flip: navy text on dark burgundy = unreadable. With this flip: ivory * text on dark burgundy = 9:1 ✓. Standalone uses of var(--ink) as page * background were migrated to var(--bg-app) on each page. */ --ink:#FBF8F2; /* was #09111F — text-on-accent surfaces */ --ink2:#FFFFFF; /* was #111B2E — surfaces/cards */ --ink3:#EFE5D2; /* was #192540 — secondary surfaces (deeper warm well) */ --ink4:#E5DAC2; /* was #1E2E4A — tertiary surfaces */ --snow:#0F1A2E; /* was #EEF0F4 — body text inverts to navy */ /* Secondary/tertiary text was #556074 (4.8:1 on ivory) and #8A94A6 (3.1:1). * At 11–13px — the size most labels and meta lines use — 4.8:1 feels washed * and 3.1:1 fails AA. Bump to #3E4756 (7.2:1, AAA for body, AA for small) * and #5C6472 (4.7:1, AA for body). Keeps the visual hierarchy (primary > * secondary > muted) but all three pass AA at the sizes they're actually * used at. */ --fog:#3E4756; /* was #C2CDDE — tertiary text (now AAA on ivory) */ --mist:#3E4756; /* was #8496B0 — secondary text (AAA on ivory) */ --slate:#5C6472; /* was #4B5A72 — muted text (AA on ivory) */ --card:#FFFFFF; /* was rgba(17,27,46,.92) — card bg */ /* Borders on ivory need more contrast than the .08–.12 alpha range most * light UIs use — white cards on ivory have almost no bg/card contrast, * so the border is the only visual edge. .18–.22 navy alpha reads as a * clear hairline without feeling heavy. Burgundy --border stays at .35 * because it's the warm accent and should read as intentional. */ --border:rgba(193,39,45,.35); /* scarlet accent border */ --border2:rgba(15,26,46,.18); /* subtle border — stronger so cards have a visible edge */ /* Light mode's warm accent = bright scarlet (Nebraska/Ohio State territory). * Tested against muted burgundy and mid-crimson; scarlet felt most alive on * ivory without crossing into alert-red / Coca-Cola loud. 5.1:1 contrast on * ivory (AA for large text; the accent is used as fills + borders where that * threshold applies). Pages using var(--gold) directly pick this up. */ --gold:#C1272D; --gold2:#E0352B; /* ── Semantic tokens ────────────────────────────────────────────── * Depth in light mode comes from a real tonal step between the canvas * and the cards. The old canvas (#FAF7F0) sat 3 lightness units below * pure-white cards — so cards never separated and the page read as one * flat sheet of white. The canvas is now a genuine warm cream so white * cards visibly lift off it, mirroring how gold accents pop on dark navy. * Three-level ramp: recessed well (surface-2) < canvas (bg-app) < raised * card (white). */ --bg-app:#F3EADA; /* warm cream canvas — clearly off-white now */ --bg-surface:#FFFFFF; /* cards pop a full ~12 L-units above the canvas */ --bg-surface-2:#EBE1CD; /* recessed well — sits BELOW the canvas */ --bg-card:#FFFFFF; --bg-hover:rgba(74,58,32,.07); /* warm-tinted hover (was cool navy) */ --text-primary:#0F1A2E; /* navy — brand continuity */ --text-secondary:#3E4756; /* AAA on ivory — was #556074 (AA but weak at 11–13px) */ --text-muted:#5C6472; /* AA on ivory — was #8A94A6 (failed AA at body sizes) */ /* Accent in light mode = navy (mirrors dark mode, where navy is bg and gold * is the accent). Gold becomes a highlight-only color (pro badges, ratings, * "tagged" row tint) — keeps brand continuity without gold buttons that * compete with gold-tinted backgrounds. */ --accent:#0F1A2E; --accent-hover:#1E2E4A; --text-on-accent:#FAF7F0; /* ivory text on navy buttons */ --border-subtle:rgba(15,26,46,.18); /* matches --border2 — cards/buttons need the visible edge */ /* Was gold-yellow rgba(240,180,41,.45) — invisible on ivory. Burgundy at * .55 reads as a clear warm accent and pairs with --border. Applies to * hover states on outline buttons, popular-card rings, etc. */ --border-accent:rgba(193,39,45,.55); --focus-ring:#0F1A2E; --success:#3A8C3A; --success-bg:rgba(58,140,58,.10); --danger:#C23A3A; /* Stronger shadows in light mode so cards "pop" the way gold accents pop * on dark mode. Two-layer shadow (soft ambient + tight contact shadow) * creates a real sense of elevation. Tinted warm brown (not cool navy) so * the shadow reads as a natural cast on cream rather than a grey smudge. */ --shadow-card:0 4px 14px rgba(74,58,32,.10), 0 2px 4px rgba(74,58,32,.07); --shadow-card-hover:0 12px 30px rgba(74,58,32,.15), 0 4px 8px rgba(74,58,32,.08); --shadow-lg:0 22px 50px rgba(74,58,32,.17), 0 8px 16px rgba(74,58,32,.09); color-scheme:light; /* Warm-accent highlight for light mode — burgundy (replaces gold's role). * 8.5:1 contrast on ivory. Gold-yellow stays on navy hero surfaces via hero-accent. */ --highlight:#C1272D; --highlight-bg:rgba(193,39,45,.12); /* ── Hero / dramatic surface tokens ── * Earlier version kept a dark navy hero against the ivory body as a * "dramatic inversion." In practice it reads as half-flipped page where * only the top banner didn't get the memo. Flip hero to a soft ivory * gradient with navy text + burgundy accent so the page reads as one * coherent light theme. Gold-yellow text on ivory is unreadable, so the * accent flips to burgundy here too — matches --gold's light-mode value. */ --hero-bg:linear-gradient(135deg,#FFFFFF 0%,#F1E7D5 55%,#EBE1CD 100%); --hero-text:#0F1A2E; /* navy on ivory */ --hero-accent:#C1272D; /* burgundy accent — visible on ivory */ --hero-muted:#556074; /* ── Saved / active state ── * Dark mode uses gold-tinted bg for "saved" state. Light mode uses navy-tinted. */ --saved-bg:rgba(15,26,46,.06); --saved-border:rgba(15,26,46,.30); --saved-accent:#0F1A2E; } /* Light-mode patch layer for pages not yet migrated (Dashboard, Events, etc.). * Hardcoded colors in those pages' inline styles won't flip — this block * catches the most common offenders (white text, white-alpha hovers, hardcoded * dark backgrounds) and rewrites them for light mode. */ [data-theme="light"] [style*="color:#fff"], [data-theme="light"] [style*="color: #fff"], [data-theme="light"] [style*="color:#ffffff"], [data-theme="light"] [style*="color:white"]{ color:var(--text-primary) !important; } [data-theme="light"] [style*="background:#09111F"], [data-theme="light"] [style*="background: #09111F"], [data-theme="light"] [style*="background:#0f1419"]{ background:var(--bg-app) !important; } /* Buttons with hardcoded dark backgrounds (modal CTAs, copy buttons, etc.): * these were designed as "dark chip on dark bg" — invisible on ivory. Flip * them to ivory chip on navy border for light mode. */ [data-theme="light"] button[style*="background:var(--ink3)"], [data-theme="light"] button[style*="background:#192540"], [data-theme="light"] button[style*="background:#111B2E"]{ background:var(--bg-surface) !important; border:1px solid var(--border-subtle) !important; color:var(--text-primary) !important; } /* White-alpha hover/bg baked for dark mode — completely invisible on ivory. * Reinterpret as a subtle navy-tinted surface. */ [data-theme="light"] [style*="rgba(255,255,255,.05)"], [data-theme="light"] [style*="rgba(255, 255, 255, .05)"], [data-theme="light"] [style*="rgba(255,255,255,0.05)"], [data-theme="light"] [style*="rgba(255,255,255,.04)"], [data-theme="light"] [style*="rgba(255,255,255,.06)"], [data-theme="light"] [style*="rgba(255,255,255,.08)"], [data-theme="light"] [style*="rgba(255,255,255,.10)"], [data-theme="light"] [style*="rgba(255,255,255,0.1)"]{ background-color:var(--bg-hover) !important; } /* Hardcoded bright/pastel text colors baked for dark mode — many are too light * to read on ivory. Swap for saturated darker equivalents that pass AA on ivory. * Targets inline style attrs; CSS-rule usages are handled per-page. */ [data-theme="light"] [style*="color:#fca5a5"], [data-theme="light"] [style*="color:#f87171"]{color:#B91C1C !important;} /* pastel red → deep red */ [data-theme="light"] [style*="color:#fbbf24"]{color:#92400E !important;} /* amber → deep amber */ [data-theme="light"] [style*="color:#86efac"]{color:#15803D !important;} /* pastel green → deep green */ [data-theme="light"] [style*="color:#93c5fd"]{color:#1E40AF !important;} /* pastel blue → deep blue */ [data-theme="light"] [style*="color:#d8b4fe"]{color:#6B21A8 !important;} /* pastel purple → deep purple */ [data-theme="light"] [style*="color:#a78bfa"]{color:#6B21A8 !important;} /* violet → deep purple */ [data-theme="light"] [style*="color:#22c55e"]{color:#15803D !important;} /* bright green → deep green */ [data-theme="light"] [style*="color:#60a5fa"]{color:#1E40AF !important;} /* bright blue → deep blue */ [data-theme="light"] [style*="color:#ef4444"]{color:#B91C1C !important;} /* bright red → deep red */ [data-theme="light"] [style*="color:#c0392b"]{color:#B91C1C !important;} /* bright red → deep red */ [data-theme="light"] [style*="color:#ccd8d0"]{color:var(--text-secondary) !important;} [data-theme="light"] [style*="color:#ddd"]{color:var(--text-secondary) !important;} [data-theme="light"] [style*="color:#eee"]{color:var(--text-secondary) !important;} [data-theme="light"] [style*="color:#d97706"]{color:#92400E !important;} /* amber → deep amber */ [data-theme="light"] [style*="color:#2563eb"]{color:#1E40AF !important;} /* blue → deep blue */ [data-theme="light"] [style*="color:#6b7280"]{color:var(--text-secondary) !important;} [data-theme="light"] [style*="color:#dc2626"]{color:#B91C1C !important;} [data-theme="light"] [style*="color:#f0b429"], [data-theme="light"] [style*="color:#F0B429"], [data-theme="light"] [style*="color: #f0b429"], [data-theme="light"] [style*="color:#ffd878"], [data-theme="light"] [style*="color:#FFD878"]{color:#C1272D !important;} /* bright gold → burgundy (unreadable on ivory otherwise) */ /* Stronger hardcoded dark backgrounds on buttons/chips that don't use tokens */ [data-theme="light"] [style*="background:#192540"], [data-theme="light"] [style*="background: #192540"], [data-theme="light"] [style*="background:#111B2E"], [data-theme="light"] [style*="background: #111B2E"], [data-theme="light"] [style*="background:#1E2E4A"], [data-theme="light"] [style*="background:rgba(9,17,31"]{ background:var(--bg-surface) !important; } /* Additional pastel/accent hex colors used in inline styles on status badges, * tier labels, and callout titles. Same deep-on-ivory swap pattern as above. */ [data-theme="light"] [style*="color:#fb923c"]{color:#9A3412 !important;} /* orange → deep orange */ [data-theme="light"] [style*="color:#4ade80"]{color:#15803D !important;} /* bright green → deep green */ [data-theme="light"] [style*="color:#4fc3f7"]{color:#1E40AF !important;} /* cyan → deep blue */ [data-theme="light"] [style*="color:#9ca3af"], [data-theme="light"] [style*="color:#94a3b8"]{color:var(--text-secondary) !important;} /* cool gray → secondary */ [data-theme="light"] [style*="color:#E85D04"]{color:#9A3412 !important;} /* bright orange → deep orange */ [data-theme="light"] [style*="color:#556"]{color:var(--text-secondary) !important;} /* near-invisible slate */ /* Border-color variants of the gold/white tints — dark-mode border rings need * to flip to the light-mode burgundy-border family or a subtle navy. */ [data-theme="light"] [style*="border:1px solid rgba(255,255,255,.1)"], [data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.1)"], [data-theme="light"] [style*="border-color:rgba(255,255,255,.1)"]{ border-color:var(--border-subtle) !important; } html,body{ margin:0; padding:0; background:var(--bg-app); color:var(--text-primary); font-family:var(--font-body); font-size:var(--text-base); /* 14 → 15 → 16px. Completes the token-aligned base size initiative. */ line-height:1.6; } button,input,select,textarea{font-family:inherit;font-size:inherit;} ::-webkit-scrollbar{width:4px;height:4px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{background:var(--bg-surface-2);border-radius:2px;}