/* =========================================================================== CazaLife — Design tokens de la CHARTE (direction en vigueur depuis le 07/09/26) Spec : UI-UX/UI/design-system/Design-System-CazaLife.md — §6 Gamme figée par la planche LOGO-pisteFINALE.pdf (01/09/26) : minuit #0C2139 · orange #F55904 · bleu #79AEE8 · menthe #7DC6A9 · corail #FE9B72. Remplace « Abricot & Minuit » (../abricot-minuit/), archivée. =========================================================================== */ /* */ :root { /* ---- Accent — Orange -------------------------------------------------- */ --cz-orange-50: #FEF5F0; /* 1,08 — fond de surface active, pastilles d'icône */ --cz-orange-100: #FEEBE1; /* 1,15 — fonds, bordures actives, halo de focus */ --cz-orange-200: #FDDAC8; /* 1,31 — surfaces douces */ --cz-orange-300: #FE9B72; /* 2,07 — CORAIL : fond d'icône d'app, stickers */ --cz-orange-400: #F88B4F; /* 2,39 — accent clair */ --cz-orange-500: #F55904; /* 3,33 — ACCENT : ton moyen, pas de texte courant */ --cz-orange-600: #DC5004; /* 4,04 — hover */ --cz-orange-700: #B84000; /* 5,57 — TEXTE orange ✓ AA */ --cz-orange-900: #672502; /* 11,40 — pressé, profondeur */ --cz-corail: var(--cz-orange-300); /* alias — ne pas laisser diverger */ /* ---- Le sombre — Minuit ---------------------------------------------- */ --cz-minuit-50: #EEF1F5; --cz-minuit-100: #D6DDE6; --cz-minuit-300: #8895A6; /* texte 2ᵈ sur minuit — 5,34:1 sur minuit-500 */ --cz-minuit-500: #0C2139; /* TEXTE par défaut — 16,25:1 sur blanc */ --cz-minuit-700: #081726; /* ---- Bleu & Menthe — les deux autres couleurs de marque --------------- */ --cz-bleu-50: #EFF5FC; /* 1,06 — fond d'info */ --cz-bleu-100: #D9E7F7; /* 1,20 — bordures d'info */ --cz-bleu-500: #79AEE8; /* aplat — 2,32:1, jamais du texte */ --cz-bleu-700: #1F5A98; /* texte bleu — 7,06:1 · sert aussi d'info */ --cz-menthe-500: #7DC6A9; /* aplat — 2,00:1, jamais du texte */ --cz-menthe-700: #2E7A5C; /* texte menthe — 5,18:1 · sert aussi de success */ /* ---- Neutres chauds — Grège ------------------------------------------ */ --cz-grege-0: #FFFFFF; /* FOND D'APP */ --cz-grege-50: #FAF8F5; --cz-grege-100: #F4F1EC; --cz-grege-200: #E9E4DC; --cz-grege-300: #D8D1C6; --cz-grege-500: #8A8179; /* décoratif — 3,4:1, pas de texte */ --cz-grege-600: #6B635C; /* texte secondaire — 5,89:1 */ /* ---- Sémantiques — deux viennent de la marque, deux sont ajoutées ----- */ --cz-success: #2E7A5C; --cz-success-bg: #E4F1EB; /* = menthe-700, blanc dessus 5,18:1 */ --cz-warning: #F5BA0A; --cz-warning-bg: #FDF4DC; /* ajouté, 45° — texte minuit 9,22:1 */ --cz-warning-700: #8A6410; /* liseré de bannière — 4,90 sur warning-bg */ --cz-error: #C0364A; --cz-error-bg: #F9E5E8; /* ajouté — blanc dessus 5,43:1 */ --cz-info: #1F5A98; --cz-info-bg: #E7EFF8; /* = bleu-700, blanc dessus 7,06:1 */ /* ---- Score A→G (tous AA même en badge sm — lettre OBLIGATOIRE) -------- */ --cz-score-a: #2E7A5C; --cz-score-b: #5E9E62; --cz-score-c: #93AF48; --cz-score-d: #D9A72A; --cz-score-e: #D9741F; --cz-score-f: #C0472C; --cz-score-g: #8E2333; --cz-score-unknown: #B9AFA2; /* ---- Typographie ------------------------------------------------------ */ --cz-font-display: 'M PLUS Rounded 1c', sans-serif; /* parent du logotype — §3.1 */ --cz-font-body: 'Nunito Sans', -apple-system, sans-serif; --cz-font-mono: 'JetBrains Mono', 'SF Mono', monospace; /* ---- Espacement (base 4px — §4.1) ------------------------------------- */ --cz-space-1:4px; --cz-space-2:8px; --cz-space-3:12px; --cz-space-4:16px; --cz-space-5:20px; --cz-space-6:24px; --cz-space-8:32px; --cz-space-10:40px; --cz-space-12:48px; --cz-space-16:64px; /* ---- Rayons ----------------------------------------------------------- */ --cz-radius-sm: 10px; --cz-radius-md: 14px; --cz-radius-button: 9999px; /* pilule — écho du logotype très rond */ --cz-radius-lg: 20px; --cz-radius-xl: 28px; --cz-radius-squircle: 23%; /* contenants carrés — écho de l'icône d'app */ --cz-radius-circle: 50%; /* le bouton scan, et lui seul — §5.6 */ --cz-radius-pill: 9999px; /* ---- Ombres (teintées minuit) ----------------------------------------- */ --cz-shadow-sm: 0 1px 3px rgba(12,33,57,.08); --cz-shadow-md: 0 8px 22px rgba(12,33,57,.10); --cz-shadow-lg: 0 22px 48px rgba(12,33,57,.16); --cz-shadow-orange: 0 8px 20px rgba(245,89,4,.34); /* bouton scan UNIQUEMENT */ /* ---- Motion ----------------------------------------------------------- */ --cz-ease: cubic-bezier(.4,0,.2,1); --cz-dur-fast:160ms; --cz-dur-base:260ms; --cz-dur-slow:420ms; /* ---- Sémantique applicative ------------------------------------------- */ --cz-bg: var(--cz-grege-0); --cz-surface: var(--cz-grege-0); --cz-text: var(--cz-minuit-500); --cz-text-muted: var(--cz-grege-600); --cz-border: var(--cz-grege-300); --cz-primary: var(--cz-orange-300); /* le CTA — corail, avec contour obligatoire §5.1 */ --cz-primary-border: var(--cz-minuit-500); /* 1,5px : sans lui le corail ne fait que 2,07:1 */ --cz-accent-stroke: var(--cz-orange-500); /* tracés, focus, scan, glyphe d'onglet actif */ --cz-on-primary: var(--cz-minuit-500); /* JAMAIS blanc : 3,33:1 */ --cz-accent: var(--cz-menthe-500); } [data-theme="profond"] { --cz-bg: var(--cz-minuit-700); --cz-surface: var(--cz-minuit-500); --cz-text: #FFFFFF; --cz-text-muted: var(--cz-minuit-300); --cz-border: #1B3450; --cz-primary: var(--cz-orange-300); /* le CTA — corail, avec contour obligatoire §5.1 */ --cz-primary-border: var(--cz-minuit-500); /* 1,5px : sans lui le corail ne fait que 2,07:1 */ --cz-accent-stroke: var(--cz-orange-500); /* tracés, focus, scan, glyphe d'onglet actif */ --cz-on-primary: var(--cz-minuit-500); --cz-accent: var(--cz-menthe-500); } @media (prefers-reduced-motion: reduce){ :root{ --cz-dur-fast:0ms; --cz-dur-base:0ms; --cz-dur-slow:0ms; } }