/* =========================================================================== z311 — Design tokens (partagés entre toutes les apps de l'écosystème) =========================================================================== Le thème suit le système (prefers-color-scheme) par défaut. Un attribut data-theme="dark" | "light" sur force un thème (cf shared/js/theme.js). Palette : neutres (blancs/gris) sur fond très sombre — inspiration terminal sobre. PAS de vert phosphore, on veut une vraie app polishée. =========================================================================== */ :root { /* Typographie */ --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Consolas, 'Liberation Mono', 'Courier New', monospace; --font-size-base: 15px; --line-height: 1.55; /* Géométrie */ --radius: 4px; --radius-lg: 8px; --border-w: 1px; --maxw: 720px; --transition: 140ms ease; /* Espacements */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; } /* --- DARK (par défaut) ---------------------------------------------------- Fond très sombre + texte blanc cassé. Accents = blanc franc. */ :root, :root[data-theme='dark'] { --bg: #0a0a0a; --bg-elev-1: #131313; --bg-elev-2: #1a1a1a; --bg-overlay: rgba(0, 0, 0, 0.55); --border: #2a2a2a; --border-soft: #1f1f1f; --border-strong:#3b3b3b; --fg: #f5f5f5; --fg-strong: #ffffff; --fg-muted: #9a9a9a; --fg-dim: #5e5e5e; --accent: #ffffff; --accent-soft: rgba(255, 255, 255, 0.08); --success: #7ed99a; --danger: #f97a7a; --warning: #f5c071; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.6); } /* --- LIGHT (auto via prefers-color-scheme) ------------------------------- Palette neutre : gris clair en fond, blanc pour les surfaces élevées, accent noir. Pas de teinte chaude (le crème jaune était moche), juste du contraste net et lisible en plein jour. */ @media (prefers-color-scheme: light) { :root:not([data-theme='dark']) { --bg: #f2f2f5; --bg-elev-1: #ffffff; --bg-elev-2: #e8e8eb; --bg-overlay: rgba(0, 0, 0, 0.4); --border: #d6d6d9; --border-soft: #e4e4e7; --border-strong:#a8a8ac; --fg: #1a1a1c; --fg-strong: #000000; --fg-muted: #6b6b70; --fg-dim: #98989c; --accent: #000000; --accent-soft: rgba(0, 0, 0, 0.06); --success: #1d8a3a; --danger: #c8302d; --warning: #a35a00; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.12); } } :root[data-theme='light'] { --bg: #f2f2f5; --bg-elev-1: #ffffff; --bg-elev-2: #e8e8eb; --bg-overlay: rgba(0, 0, 0, 0.4); --border: #d6d6d9; --border-soft: #e4e4e7; --border-strong:#a8a8ac; --fg: #1a1a1c; --fg-strong: #000000; --fg-muted: #6b6b70; --fg-dim: #98989c; --accent: #000000; --accent-soft: rgba(0, 0, 0, 0.06); --success: #1d8a3a; --danger: #c8302d; --warning: #a35a00; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.12); }