/* ============================================================================ * DESIGN TOKENS — Bleu nuit profond (thème Navy/SETO par défaut) * ============================================================================ * Source unique de vérité. Les autres thèmes (Bloc 3) overrideront ces tokens. * ============================================================================ */ :root { /* ── Layout ───────────────────────────────────────── */ --app-max: 480px; --app-padding-x: 10px; /* Plus petit qu'avant pour cards plus larges */ --bottom-nav-h: 78px; /* Plus fine qu'avant (était 92) */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); /* ── Couleurs accent (BADGER + UI primaires) ───────── */ --accent: #4d97ff; --accent-2: #6cb5ff; --accent-glow: rgba(77, 151, 255, 0.65); /* Couleurs liseré nav — multi-couleur premium */ --nav-glow-1: rgba(167, 139, 250, 0.7); /* violet */ --nav-glow-2: rgba(77, 151, 255, 0.85); /* bleu */ --nav-glow-3: rgba(34, 211, 238, 0.8); /* cyan */ --success: #10b981; --success-2: #047857; --warning: #fbbf24; --orange: #f59e0b; --danger: #ef4444; /* ── Texte ─────────────────────────────────────────── */ --text: #f8fafc; --text-muted: rgba(248, 250, 252, 0.62); --text-dim: rgba(248, 250, 252, 0.38); /* ── Background page — bleu nuit très profond ──────── */ --page-bg: radial-gradient(ellipse at 50% 0%, rgba(47, 125, 246, 0.22), transparent 42%), radial-gradient(ellipse at 8% 92%, rgba(24, 182, 255, 0.10), transparent 45%), linear-gradient(180deg, #071d3d 0%, #061224 50%, #020713 100%); /* ── Cards — bleu nuit foncé saturé ────────────────── */ --card-bg: linear-gradient(160deg, rgba(15, 30, 60, 0.62), rgba(8, 16, 35, 0.78)); --card-stroke: rgba(120, 160, 220, 0.16); --card-stroke-strong: rgba(140, 180, 230, 0.28); /* ── Nav background — bleu nuit profond cohérent ───── */ --nav-bg: linear-gradient(180deg, rgba(7, 18, 36, 0.88), rgba(2, 8, 19, 0.94)); /* ── Radius ────────────────────────────────────────── */ --radius-card: 22px; --radius-button: 18px; --radius-icon: 16px; --radius-pill: 999px; /* Carrés compacts (toggle Réglages → Thèmes, Bloc 3) */ --radius-card-square: 8px; --radius-button-square: 7px; --radius-icon-square: 7px; /* ── Animations ────────────────────────────────────── */ --duration-fast: 140ms; --duration-base: 220ms; --duration-page: 360ms; --duration-momentum: 280ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-momentum: cubic-bezier(0.32, 0.72, 0, 1); /* ── Animation level (Off / Subtile / Marquée) ─────── */ /* Réglé par data-anim-level sur , défaut "subtle" */ --anim-bg-opacity: 0.5; /* Subtle par défaut */ --anim-bg-duration: 22s; } /* ── Animation level overrides ──────────────────────── */ body[data-anim-level="off"] { --anim-bg-opacity: 0; --anim-bg-duration: 0s; } body[data-anim-level="subtle"] { --anim-bg-opacity: 0.5; --anim-bg-duration: 22s; } body[data-anim-level="strong"] { --anim-bg-opacity: 1; --anim-bg-duration: 12s; } /* ── Forme cartes carrées (toggle Bloc 3) ───────────── */ body[data-card-shape="square"] { --radius-card: var(--radius-card-square); --radius-button: var(--radius-button-square); --radius-icon: var(--radius-icon-square); }