/* ========================================================================== TOEIC Training — jetons de design -------------------------------------------------------------------------- Deux couches : COUCHE 1 rampes brutes — identiques dans tous les thèmes, jamais utilisées directement par un composant. COUCHE 2 rôles sémantiques — les seuls jetons que les composants consomment, et les seuls qui basculent entre thèmes. Inverser des rampes au lieu de rôles est la cause classique des bugs de dark mode. Ne pas le faire. ========================================================================== */ /* ---------- COUCHE 1 : RAMPES ------------------------------------------- */ :root{ /* Marque — bleu. Amorcé sur le --brand:#2563eb du Vocab Lab pour préserver la continuité visuelle avec l'existant. */ --blue-50:#eff6ff; --blue-100:#dbeafe; --blue-200:#bfdbfe; --blue-300:#93c5fd; --blue-400:#60a5fa; --blue-500:#3b82f6; --blue-600:#2563eb; --blue-700:#1d4ed8; --blue-800:#1e40af; --blue-900:#1e3a8a; --blue-950:#172554; /* Accent — ambre. CTA, score cible, séries, mise en avant. */ --amber-50:#fffbeb; --amber-100:#fef3c7; --amber-200:#fde68a; --amber-300:#fcd34d; --amber-400:#fbbf24; --amber-500:#f59e0b; --amber-600:#d97706; --amber-700:#b45309; --amber-800:#92400e; /* Neutres — ardoise. */ --slate-0:#ffffff; --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1; --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155; --slate-800:#1e293b; --slate-900:#0f172a; --slate-950:#020617; /* Sémantiques */ --green-100:#dcfce7; --green-300:#86efac; --green-400:#4ade80; --green-600:#16a34a; --green-800:#166534; --red-100:#fee2e2; --red-300:#fca5a5; --red-400:#f87171; --red-600:#dc2626; --red-800:#991b1b; --orange-100:#ffedd5;--orange-300:#fdba74;--orange-400:#fb923c;--orange-600:#ea580c;--orange-800:#9a3412; --cyan-100:#cffafe; --cyan-300:#67e8f9; --cyan-400:#22d3ee; --cyan-600:#0891b2; --cyan-800:#155e75; /* ---------- Jetons invariants (ne basculent jamais) ---------- */ --font-sans:'Inter var','Inter',system-ui,-apple-system,'Segoe UI',Roboto, 'Helvetica Neue',Arial,'Noto Sans',sans-serif; --font-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace; /* Échelle typographique fluide : 320px → 1280px */ --fs-xs: clamp(0.750rem, 0.732rem + 0.089vw, 0.813rem); --fs-sm: clamp(0.875rem, 0.857rem + 0.089vw, 0.938rem); --fs-base: clamp(1.000rem, 0.964rem + 0.179vw, 1.125rem); --fs-lg: clamp(1.125rem, 1.054rem + 0.357vw, 1.375rem); --fs-xl: clamp(1.313rem, 1.170rem + 0.714vw, 1.813rem); --fs-2xl: clamp(1.500rem, 1.232rem + 1.339vw, 2.438rem); --fs-3xl: clamp(1.875rem, 1.446rem + 2.143vw, 3.375rem); --fs-4xl: clamp(2.250rem, 1.607rem + 3.214vw, 4.500rem); --lh-tight:1.15; --lh-snug:1.3; --lh-normal:1.6; --lh-relaxed:1.75; --ls-tight:-0.02em; --ls-snug:-0.011em; --ls-wide:0.04em; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:800; /* Espacement — base 4px */ --sp-1:0.25rem; --sp-2:0.5rem; --sp-3:0.75rem; --sp-4:1rem; --sp-5:1.25rem; --sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem; --sp-16:4rem; --sp-20:5rem; --sp-24:6rem; --sp-section: clamp(3rem, 1.5rem + 7.5vw, 6rem); --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-2xl:28px; --r-full:9999px; --bw-hair:1px; --bw-thin:1.5px; --bw-thick:2px; --w-prose:68ch; --w-content:1120px; --w-wide:1360px; --w-narrow:720px; --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem); --header-h: 60px; --z-base:0; --z-raised:10; --z-sticky:100; --z-header:200; --z-drawer:300; --z-backdrop:400; --z-modal:500; --z-popover:600; --z-toast:700; --z-skiplink:800; --dur-instant:80ms; --dur-fast:140ms; --dur-base:220ms; --dur-slow:360ms; --dur-slower:600ms; --ease-out:cubic-bezier(.16,1,.3,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); --t-colors: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } /* ---------- COUCHE 2 : RÔLES SÉMANTIQUES ------------------------------- Écrit avec light-dark() : une seule déclaration porte les deux thèmes, donc la désynchronisation clair/sombre est structurellement impossible (contrairement au duplicata de bloc qu'impose une approche @media). Chaque jeton est déclaré DEUX FOIS, sur deux lignes adjacentes : 1. la valeur claire seule → repli pour les navigateurs sans light-dark() ; ils ignorent la ligne suivante comme invalide et conservent celle-ci. Dégradation propre en thème clair. 2. light-dark(clair, sombre) → le cas normal. Le thème est piloté par `color-scheme` : :root → light dark (suit prefers-color-scheme) :root[data-theme=light] → light (choix explicite) :root[data-theme=dark] → dark (choix explicite) ---------------------------------------------------------------------- */ :root{ color-scheme: light dark; /* Surfaces, par élévation croissante */ --bg: var(--slate-50); --bg: light-dark(var(--slate-50), var(--slate-950)); --surface: var(--slate-0); --surface: light-dark(var(--slate-0), var(--slate-900)); --surface-2: var(--slate-100); --surface-2: light-dark(var(--slate-100), var(--slate-800)); --surface-3: var(--slate-200); --surface-3: light-dark(var(--slate-200), var(--slate-700)); --surface-hover: var(--slate-100); --surface-hover: light-dark(var(--slate-100), #1a2438); --surface-active:var(--slate-200); --surface-active:light-dark(var(--slate-200), var(--slate-800)); --overlay: rgb(15 23 42 / .55); --overlay: light-dark(rgb(15 23 42 / .55), rgb(2 6 23 / .7)); /* Texte */ --text: var(--slate-900); --text: light-dark(var(--slate-900), var(--slate-100)); --text-muted: var(--slate-600); --text-muted: light-dark(var(--slate-600), var(--slate-400)); --text-subtle: var(--slate-500); --text-subtle: light-dark(var(--slate-500), var(--slate-500)); --text-on-brand: #ffffff; --text-on-brand: light-dark(#ffffff, var(--slate-950)); --text-inverse: var(--slate-0); --text-inverse: light-dark(var(--slate-0), var(--slate-900)); /* Bordures — en sombre, #24324a et non slate-800, pour tenir le ratio 3:1 exigé par WCAG SC 1.4.11 sur les éléments non textuels. */ --border: var(--slate-200); --border: light-dark(var(--slate-200), #24324a); --border-strong: var(--slate-300); --border-strong: light-dark(var(--slate-300), var(--slate-700)); --border-subtle: var(--slate-100); --border-subtle: light-dark(var(--slate-100), #1a2438); /* Marque. Le REMPLI reste soutenu, mais le TEXTE de marque doit remonter en sombre : #2563eb sur #020617 donne 3,1:1 — échec AA. #60a5fa donne ~7,9:1. C'est la correction que 90 % des dark modes oublient. */ --brand: var(--blue-600); --brand: light-dark(var(--blue-600), var(--blue-500)); --brand-hover: var(--blue-700); --brand-hover: light-dark(var(--blue-700), var(--blue-400)); --brand-active: var(--blue-800); --brand-active: light-dark(var(--blue-800), var(--blue-300)); --brand-text: var(--blue-700); --brand-text: light-dark(var(--blue-700), var(--blue-400)); --brand-subtle: var(--blue-50); --brand-subtle: light-dark(var(--blue-50), rgb(37 99 235 / .16)); --brand-border: var(--blue-200); --brand-border: light-dark(var(--blue-200), rgb(96 165 250 / .32)); --brand-ring: rgb(37 99 235 / .35); --brand-ring: light-dark(rgb(37 99 235 / .35), rgb(96 165 250 / .45)); /* Accent */ --accent: var(--amber-500); --accent: light-dark(var(--amber-500), var(--amber-400)); --accent-hover: var(--amber-600); --accent-hover: light-dark(var(--amber-600), var(--amber-300)); --accent-text: var(--amber-700); --accent-text: light-dark(var(--amber-700), var(--amber-300)); --accent-subtle: var(--amber-50); --accent-subtle: light-dark(var(--amber-50), rgb(245 158 11 / .14)); --accent-border: var(--amber-200); --accent-border: light-dark(var(--amber-200), rgb(251 191 36 / .30)); /* Sémantiques */ --success: var(--green-600); --success: light-dark(var(--green-600), var(--green-400)); --success-text: var(--green-800); --success-text: light-dark(var(--green-800), var(--green-300)); --success-subtle: var(--green-100); --success-subtle: light-dark(var(--green-100), rgb(22 163 74 / .16)); --success-border: var(--green-300); --success-border: light-dark(var(--green-300), rgb(74 222 128 / .32)); --warning: var(--orange-600); --warning: light-dark(var(--orange-600), var(--orange-400)); --warning-text: var(--orange-800); --warning-text: light-dark(var(--orange-800), var(--orange-300)); --warning-subtle: var(--orange-100); --warning-subtle: light-dark(var(--orange-100), rgb(234 88 12 / .16)); --warning-border: var(--orange-300); --warning-border: light-dark(var(--orange-300), rgb(251 146 60 / .32)); --danger: var(--red-600); --danger: light-dark(var(--red-600), var(--red-400)); --danger-text: var(--red-800); --danger-text: light-dark(var(--red-800), var(--red-300)); --danger-subtle: var(--red-100); --danger-subtle: light-dark(var(--red-100), rgb(220 38 38 / .16)); --danger-border: var(--red-300); --danger-border: light-dark(var(--red-300), rgb(248 113 113 / .32)); --info: var(--cyan-600); --info: light-dark(var(--cyan-600), var(--cyan-400)); --info-text: var(--cyan-800); --info-text: light-dark(var(--cyan-800), var(--cyan-300)); --info-subtle: var(--cyan-100); --info-subtle: light-dark(var(--cyan-100), rgb(8 145 178 / .16)); --info-border: var(--cyan-300); --info-border: light-dark(var(--cyan-300), rgb(34 211 238 / .32)); /* Focus */ --focus-ring: var(--blue-600); --focus-ring: light-dark(var(--blue-600), var(--blue-400)); --focus-ring-alt: #ffffff; --focus-ring-alt: light-dark(#ffffff, var(--slate-950)); --focus-width:3px; --focus-offset:2px; /* Ombres — bien plus opaques en sombre, où l'élévation repose surtout sur les bordures. */ --shadow-xs: 0 1px 2px rgb(15 23 42 / .05); --shadow-xs: 0 1px 2px light-dark(rgb(15 23 42 / .05), rgb(0 0 0 / .40)); --shadow-sm: 0 1px 3px rgb(15 23 42 / .08), 0 1px 2px rgb(15 23 42 / .04); --shadow-sm: 0 1px 3px light-dark(rgb(15 23 42 / .08), rgb(0 0 0 / .50)), 0 1px 2px light-dark(rgb(15 23 42 / .04), rgb(0 0 0 / .30)); --shadow-md: 0 4px 12px rgb(15 23 42 / .08), 0 2px 4px rgb(15 23 42 / .04); --shadow-md: 0 4px 12px light-dark(rgb(15 23 42 / .08), rgb(0 0 0 / .50)), 0 2px 4px light-dark(rgb(15 23 42 / .04), rgb(0 0 0 / .30)); --shadow-lg: 0 12px 28px rgb(15 23 42 / .10), 0 4px 8px rgb(15 23 42 / .05); --shadow-lg: 0 12px 28px light-dark(rgb(15 23 42 / .10), rgb(0 0 0 / .55)), 0 4px 8px light-dark(rgb(15 23 42 / .05), rgb(0 0 0 / .35)); --shadow-xl: 0 24px 56px rgb(15 23 42 / .14); --shadow-xl: 0 24px 56px light-dark(rgb(15 23 42 / .14), rgb(0 0 0 / .65)); } /* Choix explicite de l'utilisateur : on épingle color-scheme, et light-dark() suit automatiquement. Aucun jeton à redéclarer. */ :root[data-theme="light"]{ color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; }