/* ============================================================ VANTAGE — Design tokens & pont de conversion Charte « Laiton » · clair (défaut) + sombre ------------------------------------------------------------ Convention de thème : :root = CLAIR (mode principal) [data-theme="dark"] = SOMBRE (bascule via JS/localStorage) Le JS pose/retire data-theme="dark" sur . ============================================================ */ /* ---------- 1. TOKENS DS — THÈME CLAIR (défaut) ---------- */ :root { /* Fonds & surfaces */ --bg: #F3EFE6; --bg2: #EBE5D8; --panel: #FFFFFF; --panel2: #FAF6EC; /* Bordures */ --border: rgba(120,95,40,.16); --border-strong: rgba(120,95,40,.34); /* Texte */ --text: #1B1710; --text2: #6B6353; --text3: #9A9080; /* Accent (laiton) */ --accent: #9A7C3C; --accent-bright: #B8985A; --accent-deep: #7C6230; --accent-ink: #FFFBF2; --glow: rgba(154,124,60,.20); --grid: rgba(120,95,40,.05); /* Types de roster (badge + liseré de carte). Classic = accent. */ --roster-classic: #9A7C3C; --roster-academy: #4E7EA8; --roster-gc: #7A5FB0; /* Sémantique */ --pos: #3D9968; --neg: #B84545; --info: #4E7EA8; --warning: #9A7C3C; /* Data-viz heatmap (indépendant du thème) */ --data-kill: #50DC82; --data-death: #F05050; --data-mid: #FAF0B4; --data-enemy: #000000; /* Typographie */ --font-display: 'Chakra Petch', sans-serif; --font-body: 'IBM Plex Sans', sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Hero « vitrine » (norme partagée : titres de page + accent serif italique) */ --font-hero: 'Bricolage Grotesque', 'Chakra Petch', sans-serif; --font-serif: 'Instrument Serif', serif; /* Échelle typo (base 17px) — px cibles du DS, rem = px/17 */ --text-2xs: .5882rem; /* 10px */ --text-xs: .6471rem; /* 11px */ --text-sm: .7647rem; /* 13px */ --text-base: .8824rem; /* 15px */ --text-md: 1rem; /* 17px */ --text-lg: 1.2941rem; /* 22px */ --text-xl: 1.5294rem; /* 26px */ --text-2xl: 2.2353rem; /* 38px */ /* Espacement (base 4px) */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; /* Rayons */ --radius-sm: 3px; --radius-md: 6px; --radius-lg: 12px; --radius-pill: 100px; --radius: 12px; /* Icônes */ --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; /* Ombres */ --shadow-sm: 0 2px 8px rgba(90,70,30,.10); --shadow-md: 0 12px 30px rgba(90,70,30,.12); --shadow-lg: 0 24px 60px rgba(90,70,30,.14); --shadow: var(--shadow-lg); /* Motion */ --dur-fast: .15s; --dur: .25s; --dur-slow: .40s; --ease: cubic-bezier(.4,0,.2,1); /* App header */ --app-header-h: 52px; } /* ---------- 1b. THÈME SOMBRE ---------- */ [data-theme="dark"] { --bg: #0B0B0D; --bg2: #100D07; --panel: #14130E; --panel2: #1A1810; --border: rgba(201,174,114,.14); --border-strong: rgba(201,174,114,.32); --text: #F1EFE7; --text2: #9A9488; --text3: #6E6A60; --accent: #C9AE72; --accent-bright: #DBC48A; --accent-deep: #A98B4E; --accent-ink: #171308; --glow: rgba(201,174,114,.34); --grid: rgba(201,174,114,.06); /* Types de roster (badge + liseré de carte). Classic = accent. */ --roster-classic: #C9AE72; --roster-academy: #6FA6D0; --roster-gc: #B79BE0; --pos: #4CAF7A; --neg: #C75050; --info: #5B8DB8; --warning: #C9AE72; --shadow-sm: 0 2px 8px rgba(0,0,0,.35); --shadow-md: 0 12px 30px rgba(0,0,0,.45); --shadow-lg: 0 24px 60px rgba(0,0,0,.50); }