/* ============================================================================ Hitcourt Design System v1.0.0-beta.1 (2026-07-19) tokens.css — the owned design system's token layer (Layer 2 of the stack) Derived from the LTAT Tour theme export (theme-export/), systematized. Read this alongside theme-export/tokens.md (the source analysis) and theme-export/bootstrap-map.md (the --bs-* mapping rationale). WHY THIS FILE EXISTS, AND WHAT WAS DECIDED The LTAT theme is a *front-of-house* portal, not an admin panel. It ships ~25 real custom properties plus a large body of hard-coded literals, and it has NO systematic scales (no grey ramp, no type scale, no spacing scale, one radius token) and NO dark mode. This file turns that into a real, comprehensible token system: 1. BRAND — the raw LTAT palette, verbatim from the source (literal). 2. SCALES — neutral ramp, type, radii, shadows: IMPOSED here because the theme has none. Anchored on real LTAT hues/values. 3. SEMANTIC — success/danger/warning/info MINTED to one value each (the source has five greens, several reds — collapsed). 4. CONSUMER — the vocabulary components read (--accent, --surface, --fs-*, etc.). This is the stable public API; the layers above are its source of truth. 5. --bs-* — Bootstrap 5.3 overrides so 976 Bootstrap-markup views inherit the theme (per bootstrap-map.md). 6. DARK — APPROVED and SHIPPED. The source has no dark mode, so this set is ours. v4 is tuned for long sessions: near- neutral low-chroma surfaces, not saturated navy. See §6. SETTLED DECISIONS (approved by owner + designer — do not re-open unasked): A. --accent = brand NAVY (not gold). Navy is the readable, dominant workhorse (links, active states, primary). Gold can't carry text contrast, so gold takes the --warning slot — which is also its real role in LTAT (the "live" pill is gold). B. The two golds (#f5b21e brand vs #d6ab3a glow) are collapsed to ONE (#f5b21e). The metallic glow gold is kept only as --brand-gold-glow for the decorative card/row glows, not as a UI token. C. Success/danger reconciled to #1f9d55 / #d0554e (bootstrap-map's rec). D. Dark mode is KEPT. --accent-strong carries the primary CTA so it can be white-on-blue in dark while --accent stays light enough for links. NOTE ON LIGHT vs DARK: light mode is LTAT-brand-faithful (navy on white). Dark mode deliberately DIVERGES to near-neutral greys — brand fidelity on a large dark field costs eye comfort, and admins live in this screen. ========================================================================== */ /* ============================================================================ 1 · BRAND — raw LTAT palette (verbatim from source; do not "improve" here) ========================================================================== */ :root { /* Navy — a hand-picked 4-step DARK ramp. Note -700 is LIGHTER than base. */ --brand-navy: #0e2c5c; /* workhorse ink / primary fill */ --brand-navy-700: #12356b; /* LIGHTER — hover on navy fills */ --brand-navy-800: #0b2349; /* darker */ --brand-navy-900: #071730; /* darkest — hero/section/footer backgrounds */ /* Gold — ⚑ DECISION B: one brand gold. */ --brand-gold: #f5b21e; /* the accent / CTA / "live" gold */ --brand-gold-600: #e0a015; /* darker gold — hover, gold-on-white text */ --brand-gold-050: #fff7e6; /* palest tint — soft fills, "win" row bg */ --brand-gold-glow: #d6ab3a; /* metallic glow gold — decorative glows ONLY */ /* Domain tier accents — a meaningful categorical palette; preserve exactly */ --tier-itf: #1b9e5a; /* World Tennis / juniors (green) */ --tier-atp: #1e6fd9; /* ATP (blue) */ --tier-wta: #9127b5; /* WTA (purple) */ --accent-crimson: #b5306f; /* draws/penalties/OOP — a 5th accent, NOT danger */ } /* ============================================================================ 2 · SCALES — IMPOSED (the theme ships none). Anchored on real LTAT values. ========================================================================== */ :root { /* Neutral ramp — built, blue-grey tinted to match --line/--bg-alt. Anchors that ARE from source: n-200 = LTAT --line, n-500 = LTAT --muted. */ --n-100: #eef2f9; --n-200: #e4e9f2; /* = LTAT --line */ --n-300: #d2dae7; --n-400: #a9b4c6; --n-500: #5e6e82; /* = LTAT --muted */ --n-600: #3d4b5f; /* Type — no scale exists in source; this is an imposed, admin-dense scale. Base is .9rem (14.4px) for data density; headings step ~1.25×. */ --fs--2: .69rem; /* eyebrows, table meta */ --fs--1: .8rem; /* small / secondary */ --fs-0: .9rem; /* BASE body */ --fs-1: 1.05rem; /* lead / large body */ --fs-2: 1.3rem; /* card & section headings */ --fs-3: 1.75rem; /* page headings */ --fs-4: 2.3rem; /* display */ /* Weights — Poppins ships 400–900; the design leans heavy (headings 700+). */ --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* Font — self-hosted, no CDN. Latin→Poppins, Thai→Sarabun, then system. */ --font-sans: 'Poppins', 'Sarabun', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; /* Radii — source scale is 6/8/10/12/14/16/999; fitted to 4 named steps. */ --radius-sm: 6px; /* chips, badges, status pills */ --radius: 10px; /* buttons, inputs, the component default */ --radius-lg: 16px; /* = LTAT --radius; big cards */ --radius-pill: 999px; /* toggle pills, count badges, avatars */ /* Shadows — navy-tinted (rgba(8,23,48,*)), soft & large, from source. */ --shadow-sm: 0 6px 20px rgba(8, 23, 48, .10); /* = LTAT --shadow-sm */ --shadow: 0 10px 30px rgba(8, 23, 48, .12); /* mid (derived) */ --shadow-lg: 0 18px 50px rgba(8, 23, 48, .18); /* = LTAT --shadow */ /* Layout metrics — admin-tuned (the portal has no sidebar to port). */ --sidebar-w: 250px; --sidebar-collapsed-w: 66px; --topbar-h: 60px; --maxw: 1240px; /* = LTAT --maxw (.wrap width) */ } /* ============================================================================ 3 · SEMANTIC — MINTED to one value each (source had five greens, etc.) ========================================================================== */ :root { --success: #1f9d55; --success-soft: #f2fbf6; --success-ink: #147045; --danger: #c24840; --danger-soft: #fbeceb; --danger-ink: #b53c33; /* darkened from export #d0554e: white-on-fill was 4.12:1 */ --warning: #f5b21e; --warning-soft: #fff7e6; --warning-ink: #8a5d0e; /* = gold */ --info: #1e6fd9; --info-soft: #e8f1fd; --info-ink: #1857a8; } /* ============================================================================ 4 · CONSUMER — the API components read. Everything above feeds this. ========================================================================== */ :root { /* Surfaces (light) — white cards on a faint blue-grey ground. */ --surface: #ffffff; /* = --bg */ --surface-2: #eef3fb; /* = LTAT --bg-alt; inset/secondary surface */ --ground: #e6ecf6; /* app background, sits below surface-2 (derived) */ /* Ink */ --ink: #17233c; /* = LTAT --ink; body text */ --ink-2: #5e6e82; /* = LTAT --muted; secondary text */ --ink-3: #8492a6; /* tertiary / placeholder (derived) */ /* Rules */ --rule: #e4e9f2; /* = LTAT --line */ --rule-strong: #d2dae7; /* = --n-300 */ /* ⚑ DECISION A — ACCENT = NAVY. To flip to a gold accent instead, replace these four lines with: --accent: #f5b21e; --accent-600: #e0a015; --accent-soft: #fff7e6; --accent-ink: #8a5d0e; …and expect to re-check link/active-state contrast everywhere. */ --accent: #0e2c5c; /* = --brand-navy */ --accent-600: #0b2349; /* = --brand-navy-800 (gradient end / darker) */ --accent-soft: #e8eef9; /* pale navy tint (chips/active fills) */ --accent-ink: #0e2c5c; /* navy text on --accent-soft */ /* Text that sits ON an --accent fill (date block, step circles, panel headers, the brand mark). MUST be paired with --accent, never hardcoded: on light the accent is dark so this is white; on dark the accent is a lifted blue so this flips to deep navy. Use var(--on-accent), not #fff. */ --on-accent: #ffffff; /* FILLED-CTA role — the primary action button (e.g. "New tournament"). Distinct from --accent because on a DARK surface the accent must stay light enough to read as link text, but a CTA fill must be deep enough to carry WHITE text and pop. On light both collapse to navy, so light mode is unchanged. `-600` is the hover step (darkens on light, brightens on dark). See DECISION notes; components: .btn-primary only. */ --accent-strong: #0e2c5c; /* = --brand-navy (light: same as --accent) */ --accent-strong-600: #0b2349; /* hover — darker on light */ --on-accent-strong: #ffffff; /* white both themes (fill stays dark enough)*/ /* On-fill text for the danger fill (buttons, notification counts). Light: white on #d0554e = 4.6:1. Dark: --danger lifts for text use, so white would drop to ~3.6:1 — flip to deep ink instead (~6:1). */ --on-danger: #ffffff; /* On-fill text for the remaining semantic fills (measured, both themes): warning is a bright gold — dark warm ink (6.9:1 light / 5.4:1 dark); success is mid-lum green — near-black ink (4.8 / 5.5); info carries white in light (4.9) but flips to deep ink in dark (5.8). */ --on-warning: #422f06; --on-success: #042412; --on-info: #ffffff; } /* ============================================================================ 5 · --bs-* — Bootstrap 5.3 overrides (per bootstrap-map.md). Inert until the consuming app loads Bootstrap; correct for that day. ========================================================================== */ :root { --bs-body-bg: #ffffff; --bs-body-color: #17233c; --bs-emphasis-color: #071730; --bs-secondary-color: #5e6e82; --bs-secondary-bg: #eef3fb; --bs-tertiary-bg: #eef3fb; /* theme has one inset grey; serves both */ --bs-border-color: #e4e9f2; --bs-font-sans-serif: var(--font-sans); /* base font-size / line-height deliberately unset → keep BS 1rem / 1.5 */ /* Brand primary = navy; hover is LIGHTER (navy-700), so set states here — do NOT let Bootstrap generate them (bootstrap-map.md, disagreement 1). */ --bs-primary: #0e2c5c; --bs-primary-rgb: 14, 44, 92; --bs-link-color: #0e2c5c; /* navy links for contrast (deviates from */ --bs-link-hover-color: #12356b; /* bootstrap-map's gold-600 suggestion) */ /* Gold = warning (its real "live" role); secondary stays a neutral. */ --bs-warning: #f5b21e; --bs-warning-rgb: 245, 178, 30; --bs-secondary: #5e6e82; --bs-secondary-rgb: 94, 110, 130; --bs-success: #1f9d55; --bs-success-rgb: 31, 157, 85; --bs-danger: #c24840; --bs-danger-rgb: 194, 72, 64; --bs-info: #1e6fd9; --bs-info-rgb: 30, 111, 217; --bs-dark: #071730; --bs-dark-rgb: 7, 23, 48; /* Radius — fit the 6/10/16/pill scale onto BS's 3 tiers + pill so small controls stay tight and only big cards round hard (disagreement 5). */ --bs-border-radius: .625rem; /* 10px */ --bs-border-radius-sm: .375rem; /* 6px */ --bs-border-radius-lg: 1rem; /* 16px */ --bs-border-radius-pill: 999px; /* Shadows — paste the theme's exact navy-tinted values (disagreement 9). */ --bs-box-shadow-sm: 0 6px 20px rgba(8, 23, 48, .10); --bs-box-shadow: 0 10px 30px rgba(8, 23, 48, .12); --bs-box-shadow-lg: 0 18px 50px rgba(8, 23, 48, .18); } /* ============================================================================ 6 · DARK — tuned for LONG SESSIONS (admins stare at this for hours). v4 CHANGE (owner feedback + reference review): the v3 set used LTAT's saturated brand navies (#071730 / #0b2349, ~76% saturation) across every large surface. That is the single biggest driver of eye fatigue: short wavelengths scatter most in the eye and focus at a different depth, so a large saturated-blue field forces continuous re-accommodation. v4 keeps the navy only as a faint HUE CAST (~215°) at very low saturation. RULES THIS SET FOLLOWS 1. --accent stays in the navy/blue family, lifted. It must satisfy BOTH `color: var(--accent)` (links) AND `background: var(--accent); color: var(--on-accent)` (fills). A gold accent here scored ~1.9:1. 2. Gold is ONLY --warning — never chrome (as --accent it flooded the UI and collided with the warning semantic). 3. Elevation keeps light mode's RELATIONSHIP: ground < surface < surface-2. 4. LOW surface contrast, HIGH text contrast. Surfaces should not fight each other; separation comes from small steps + hairline rules, not shadows. 5. --accent-600 is the hover step, so it LIFTS in dark where it DARKENS in light. The contract is "the second/hover step", not "a darker shade". 6. Never pure black (#000) and never pure white (#fff) for body text — both cause halation around glyphs at high contrast. ========================================================================== */ /* LIGHT IS THE DEFAULT. Dark applies ONLY via an explicit data-theme="dark". The old `@media (prefers-color-scheme: dark)` auto-switch was removed: it painted dark before theme.js could restore a saved light preference, which read as a flash of dark on every page load. To re-enable OS-following, add the media query back AND have the anti-flash snippet (USAGE.md) fall back to matchMedia when nothing is stored. */ :root[data-theme="dark"] { --ground: #0d1117; --surface: #151b23; --surface-2: #1c232d; --n-100: #181f27; --n-200: #212933; --n-300: #2c3540; --n-400: #5a636e; --n-500: #8b939e; --n-600: #b6bec7; --ink: #dfe4ea; --ink-2: #a3abb5; --ink-3: #7d8691; --rule: #252e39; --rule-strong: #36414f; --accent: #5b93e0; --accent-600: #7aa9e8; --accent-soft: #17243a; --accent-ink: #a3c4ef; --on-accent: #0d1117; --accent-strong: #3172d4; --accent-strong-600: #4585e3; --on-accent-strong: #ffffff; --on-danger: #1a0f0e; --success: #3fa76a; --success-soft: #13251c; --success-ink: #74c894; --danger: #d66560; --danger-soft: #2a1b1a; --danger-ink: #e9a09c; --warning: #d3a04a; --warning-soft: #292214; --warning-ink: #dfc07e; --info: #4e94cc; --info-soft: #16232f; --info-ink: #96c6e8; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .50); --shadow: 0 4px 12px rgba(0, 0, 0, .50); --shadow-lg: 0 12px 32px rgba(0, 0, 0, .60); }