/* ================================================================ ARROW — TOKENS DE DESIGN Fondation partagée par toutes les pages du site. Ne contient QUE des custom properties (aucune règle de mise en page ici). Deux thèmes produit : - Cyber (sombre) → thème PAR DÉFAUT du site commercial. - Classic (clair) → réservé aux pages/sections sobres qui en auraient besoin plus tard ; s'active en posant data-theme="light" sur . Interdits de charte : jamais le trio #00E5FF / #7C5CFF / #FF3D8E. ================================================================ */ :root { /* ---------- Thème Cyber (sombre, défaut) ---------- */ --bg: #0d0d15; --surface-1: #14141f; --surface-2: #171b24; --ink: #e8ecf4; --ink-dim: rgba(232, 236, 244, 0.62); --ink-faint: rgba(232, 236, 244, 0.4); --ink-muted: #98a1b4; --primary: #3d9bff; --primary-soft: rgba(61, 155, 255, 0.14); --primary-line: rgba(61, 155, 255, 0.35); --secondary: #87ceeb; --brand-magenta: #ec4899; --success: #10b981; --warning: #f59e0b; --error: #ef4444; --hairline: rgba(232, 236, 244, 0.09); --border: rgba(232, 236, 244, 0.14); --shadow-soft: 0 8px 28px -14px rgba(0, 0, 0, 0.55); --shadow-strong: 0 20px 48px -18px rgba(0, 0, 0, 0.6); --font-display: "League Spartan", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-body: "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; --font-mono: "SF Mono", Menlo, monospace; --radius: 8px; --radius-lg: 14px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Alias sémantiques neutres (utilisés par base.css / home.css) */ --color-bg: var(--bg); --color-surface: var(--surface-1); --color-surface-alt: var(--surface-2); --color-text: var(--ink); --color-text-dim: var(--ink-dim); --color-text-muted: var(--ink-muted); --color-accent: var(--primary); --color-border: var(--border); --color-success: var(--success); --color-warning: var(--warning); --color-error: var(--error); --shadow-card: var(--shadow-soft); --shadow-elevated: var(--shadow-strong); } /* ---------- Thème Classic (clair) — opt-in explicite ---------- */ :root[data-theme="light"] { --bg: #f4f6f9; --surface-1: #ffffff; --surface-2: #ffffff; --ink: #141a23; --ink-dim: #586372; --ink-faint: rgba(20, 26, 35, 0.45); --ink-muted: #586372; --primary: #2563a8; --primary-soft: rgba(37, 99, 168, 0.1); --primary-line: rgba(37, 99, 168, 0.3); --secondary: #2563a8; --brand-magenta: #ec4899; --success: #2f855a; --warning: #b7791f; --error: #c0392b; --hairline: #e4e8ef; --border: #e4e8ef; --shadow-soft: 0 1px 3px rgba(20, 28, 44, 0.06); --shadow-strong: 0 8px 24px -12px rgba(20, 28, 44, 0.18); --font-body: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif; --radius: 10px; --radius-lg: 16px; --color-bg: var(--bg); --color-surface: var(--surface-1); --color-surface-alt: var(--surface-2); --color-text: var(--ink); --color-text-dim: var(--ink-dim); --color-text-muted: var(--ink-muted); --color-accent: var(--primary); --color-border: var(--border); --color-success: var(--success); --color-warning: var(--warning); --color-error: var(--error); --shadow-card: var(--shadow-soft); --shadow-elevated: var(--shadow-strong); } /* Respecte la préférence système UNIQUEMENT pour les pages qui optent explicitement dans l'auto-détection (data-theme="auto"). Le thème Cyber reste le défaut du site tant qu'aucun attribut n'est posé. */ @media (prefers-color-scheme: light) { :root[data-theme="auto"] { --bg: #f4f6f9; --surface-1: #ffffff; --surface-2: #ffffff; --ink: #141a23; --ink-dim: #586372; --ink-faint: rgba(20, 26, 35, 0.45); --ink-muted: #586372; --primary: #2563a8; --primary-soft: rgba(37, 99, 168, 0.1); --primary-line: rgba(37, 99, 168, 0.3); --success: #2f855a; --warning: #b7791f; --error: #c0392b; --hairline: #e4e8ef; --border: #e4e8ef; --shadow-soft: 0 1px 3px rgba(20, 28, 44, 0.06); --shadow-strong: 0 8px 24px -12px rgba(20, 28, 44, 0.18); --radius: 10px; --radius-lg: 16px; } }