/* ═══════════════════════════════════════════════════════════════════════ DESIGN TOKENS — single source of truth for the visual system. Dark theme is the default (marketing, form, legal, program home). Add `class="theme-light"` to the for training-screen pages. ═══════════════════════════════════════════════════════════════════════ */ :root { /* ── Accent (brand) — Roland Garros green (primary) ── */ --accent: #0E4A36; --accent-dim: rgba(14, 74, 54, 0.08); --accent-mid: rgba(14, 74, 54, 0.18); --accent-glow: rgba(14, 74, 54, 0.20); --accent-ink: #FFFFFF; /* text colour to sit on the accent */ /* ── Secondary accent — Roland Garros clay ── */ --accent-2: #C7552F; --accent-2-dim: rgba(199, 85, 47, 0.10); --accent-2-mid: rgba(199, 85, 47, 0.20); --accent-2-ink: #FFFFFF; /* ── Semantic colours ── */ --red-soft: #C0392B; --green-soft: #1F7A4D; /* ── Light theme (default) — warm paper ── */ --bg: #FAF7F2; --bg-raised: #FFFFFF; --bg-card: #FFFFFF; --border: #E7E2D9; --border-light: #D8D1C5; --text-primary: #1A1A1A; --text-secondary:#5C5C5C; --text-muted: #8A8A8A; --text-dim: #B0A99E; /* ── Typography ── */ --font-display: 'Barlow Condensed', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* ── Layout ── */ --container-max: 1120px; --container-pad: 28px; --nav-h: 72px; /* ── Radius ── */ --radius-sm: 3px; --radius-md: 6px; --radius-lg: 12px; --radius-pill: 100px; /* ── Motion ── */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 0.15s; --dur: 0.25s; --dur-slow: 0.7s; /* ── Shadow ── */ --shadow-md: 0 8px 32px rgba(40, 30, 20, 0.12); --shadow-glow: 0 8px 28px rgba(14, 74, 54, 0.22); /* ── Z-index ── */ --z-nav: 100; --z-overlay: 500; --z-modal: 1000; --z-toast: 2000; } /* ── Light theme (program training screens) — kept in sync with the warm paper default so the training app matches the rest of the site. ── */ .theme-light { --bg: #FAF7F2; --bg-raised: #FFFFFF; --bg-card: #FFFFFF; --border: #E7E2D9; --border-light: #D8D1C5; --text-primary: #1A1A1A; --text-secondary:#5C5C5C; --text-muted: #8A8A8A; --text-dim: #B0A99E; --accent-ink: #FFFFFF; } /* ── Respect user motion preference ── */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0.01ms; --dur: 0.01ms; --dur-slow: 0.01ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }