/* ===================================================================== WEB 213 — Design tokens Palette : bleu clair + blanc, verre dépoli (glassmorphism). Le thème est piloté par l'attribut [data-theme] posé sur . ===================================================================== */ :root { /* ---- Marque ---------------------------------------------------- */ --brand-50: #EEF7FE; --brand-100: #D6ECFB; --brand-200: #ADD9F6; --brand-300: #7FC3F0; --brand-400: #4FA9E5; --brand-500: #1E8FD5; /* couleur principale */ --brand-600: #1573B0; --brand-700: #115A8B; --brand-800: #0D4268; --brand-900: #092C46; --accent-400: #3FD0C9; /* turquoise du logo */ --accent-500: #1FB8B1; --ok-500: #16A46B; --warn-500: #E0A106; --err-500: #E1493F; /* ---- Rayons, ombres, transitions -------------------------------- */ --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; --r-full: 999px; --ease: cubic-bezier(.22, .61, .36, 1); --t-fast: .16s var(--ease); --t-base: .26s var(--ease); --space: 4px; --container: 1160px; /* ---- Typographie ------------------------------------------------ */ --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-ar: "Segoe UI", "Noto Naskh Arabic", "Amiri", "Tahoma", sans-serif; --font-num: ui-monospace, "SFMono-Regular", "Consolas", monospace; } /* ===================================================================== THÈME CLAIR (par défaut) ===================================================================== */ :root, [data-theme="light"] { color-scheme: light; --bg: #F4FAFE; --bg-elevated: #FFFFFF; --bg-sunken: #E8F3FB; /* Nappes décoratives du fond */ --blob-1: rgba(79, 169, 229, .46); --blob-2: rgba(63, 208, 201, .34); --blob-3: rgba(133, 197, 240, .55); --text: #0C1B2A; --text-soft: #40607C; --text-muted: #7994AC; --text-invert: #FFFFFF; --border: rgba(12, 27, 42, .10); --border-strong: rgba(12, 27, 42, .18); /* ---- Verre dépoli ---------------------------------------------- */ --glass-bg: rgba(255, 255, 255, .58); --glass-bg-soft: rgba(255, 255, 255, .40); --glass-border: rgba(255, 255, 255, .70); --glass-blur: 22px; --glass-shadow: 0 18px 50px -18px rgba(13, 66, 104, .34), 0 2px 6px rgba(13, 66, 104, .06); --glass-inner: inset 0 1px 0 rgba(255, 255, 255, .85); --field-bg: rgba(255, 255, 255, .78); --field-border: rgba(12, 27, 42, .14); --field-focus: var(--brand-500); --ring: rgba(30, 143, 213, .22); --primary: var(--brand-500); --primary-hover: var(--brand-600); --on-primary: #FFFFFF; } /* ===================================================================== THÈME SOMBRE ===================================================================== */ [data-theme="dark"] { color-scheme: dark; --bg: #060F18; --bg-elevated: #0D1B28; --bg-sunken: #030A11; --blob-1: rgba(30, 143, 213, .30); --blob-2: rgba(31, 184, 177, .20); --blob-3: rgba(17, 90, 139, .34); --text: #E9F4FB; --text-soft: #A8C2D6; --text-muted: #6D8AA1; --text-invert: #06121C; --border: rgba(255, 255, 255, .10); --border-strong: rgba(255, 255, 255, .20); --glass-bg: rgba(19, 40, 58, .58); --glass-bg-soft: rgba(19, 40, 58, .34); --glass-border: rgba(255, 255, 255, .12); --glass-blur: 24px; --glass-shadow: 0 20px 56px -20px rgba(0, 0, 0, .78), 0 2px 8px rgba(0, 0, 0, .30); --glass-inner: inset 0 1px 0 rgba(255, 255, 255, .07); --field-bg: rgba(255, 255, 255, .05); --field-border: rgba(255, 255, 255, .14); --field-focus: var(--brand-300); --ring: rgba(127, 195, 240, .26); --primary: var(--brand-400); --primary-hover: var(--brand-300); --on-primary: #04121D; } /* Respect de la préférence système tant que l'utilisateur n'a pas choisi */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #060F18; --bg-elevated: #0D1B28; --bg-sunken: #030A11; --blob-1: rgba(30, 143, 213, .30); --blob-2: rgba(31, 184, 177, .20); --blob-3: rgba(17, 90, 139, .34); --text: #E9F4FB; --text-soft: #A8C2D6; --text-muted: #6D8AA1; --text-invert: #06121C; --border: rgba(255, 255, 255, .10); --border-strong: rgba(255, 255, 255, .20); --glass-bg: rgba(19, 40, 58, .58); --glass-bg-soft: rgba(19, 40, 58, .34); --glass-border: rgba(255, 255, 255, .12); --glass-shadow: 0 20px 56px -20px rgba(0, 0, 0, .78), 0 2px 8px rgba(0, 0, 0, .30); --glass-inner: inset 0 1px 0 rgba(255, 255, 255, .07); --field-bg: rgba(255, 255, 255, .05); --field-border: rgba(255, 255, 255, .14); --field-focus: var(--brand-300); --ring: rgba(127, 195, 240, .26); --primary: var(--brand-400); --primary-hover: var(--brand-300); --on-primary: #04121D; } }