/* ═══════════════════════════════════════════════════════════════ LEX DESIGN — tokens.css Variables communes à toutes les apps Lex. Chaque app définit SON theme.css qui surcharge : --accent-app (couleur d'accent) et éventuellement quelques tokens locaux. Thème : sombre par défaut, clair auto (prefers-color-scheme), forçable via . ═══════════════════════════════════════════════════════════════ */ :root{ /* géométrie & typo */ --radius:22px; --radius-s:14px; --font:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,Helvetica,sans-serif; /* accent par défaut (surchargé par le theme.css de l'app) Palette officielle : Manager bleu #3d8bff · Chat cyan #2fd0ff · Inventaire orange #ff9432 · Panel violet #9b5cff · Remote rouge #ff4545 · IA rose #ff64b8 · Nation rose foncé #d92e78 */ --accent-app:#3d8bff; /* ── thème SOMBRE (défaut) ── */ --bg:#08080c; --text:#fff; --muted:rgba(255,255,255,.62); --danger:#ff5252; --warn:#ffaa00; --ok:#00e5a0; --success:#00e5a0; /* verre */ --glass-bg:rgba(30,32,42,.26); --glass-bg-strong:rgba(24,25,33,.55); --glass-border:rgba(255,255,255,.16); --hl-top:rgba(255,255,255,.5); --hl-low:rgba(255,255,255,.12); --glass-shadow:0 10px 40px rgba(0,0,0,.5); --fallback-blur:26px; /* compat legacy (anciens CSS des apps) */ --panel:rgba(30,32,42,.4); --panel2:rgba(20,21,28,.45); --border:rgba(255,255,255,.14); /* fond ambiant */ --bg-tint2:rgba(140,90,255,.14); --bg-tint3:rgba(0,190,160,.10); --bg-grid-dot:rgba(255,255,255,.12); } /* ── thème CLAIR auto ── */ @media (prefers-color-scheme: light){ :root{ --bg:#e9ecf4; --text:#0d0e12; --muted:#5c6470; --glass-bg:rgba(255,255,255,.32); --glass-bg-strong:rgba(255,255,255,.6); --glass-border:rgba(255,255,255,.75); --hl-top:rgba(255,255,255,.95); --hl-low:rgba(255,255,255,.4); --glass-shadow:0 10px 40px rgba(30,40,80,.15); --panel:rgba(255,255,255,.5); --panel2:rgba(255,255,255,.38); --border:rgba(10,20,50,.12); --bg-tint2:rgba(120,90,255,.14); --bg-tint3:rgba(0,180,150,.12); --bg-grid-dot:rgba(0,0,30,.12); } } /* ── forçage manuel ── */ html[data-theme="dark"]{color-scheme:dark} html[data-theme="dark"]{ --bg:#08080c; --text:#fff; --muted:rgba(255,255,255,.62); --glass-bg:rgba(30,32,42,.26); --glass-bg-strong:rgba(24,25,33,.55); --glass-border:rgba(255,255,255,.16); --hl-top:rgba(255,255,255,.5); --hl-low:rgba(255,255,255,.12); --glass-shadow:0 10px 40px rgba(0,0,0,.5); --panel:rgba(30,32,42,.4); --panel2:rgba(20,21,28,.45); --border:rgba(255,255,255,.14); --bg-grid-dot:rgba(255,255,255,.12); } html[data-theme="light"]{color-scheme:light} html[data-theme="light"]{ --bg:#e9ecf4; --text:#0d0e12; --muted:#5c6470; --glass-bg:rgba(255,255,255,.32); --glass-bg-strong:rgba(255,255,255,.6); --glass-border:rgba(255,255,255,.75); --hl-top:rgba(255,255,255,.95); --hl-low:rgba(255,255,255,.4); --glass-shadow:0 10px 40px rgba(30,40,80,.15); --panel:rgba(255,255,255,.5); --panel2:rgba(255,255,255,.38); --border:rgba(10,20,50,.12); --bg-grid-dot:rgba(0,0,30,.12); }