/* ==========================================================================
Kadanso — design tokens (v1.0, sept. 2026)
Source de vérité : /home/claude/agence/03-marque.md
Polices Google Fonts à charger :
========================================================================== */
:root {
/* ---- Couleurs de marque (échelles) ---------------------------------- */
--kd-indigo-50: #EEECFF;
--kd-indigo-100: #DEDAFF;
--kd-indigo-200: #C3BDFF;
--kd-indigo-300: #A69EFF;
--kd-indigo-400: #7C70FF;
--kd-indigo-500: #4A3AFF; /* primaire « Indigo Kadanso » */
--kd-indigo-600: #3F2FEE;
--kd-indigo-700: #3726D9;
--kd-indigo-800: #2B1FAB;
--kd-indigo-900: #221A80;
--kd-corail-50: #FFF1EC;
--kd-corail-100: #FFDFD3;
--kd-corail-200: #FFBFA8;
--kd-corail-300: #FF9A78;
--kd-corail-400: #FF8157;
--kd-corail-500: #FF6A3D; /* accent « Corail » : jamais de texte blanc dessus */
--kd-corail-600: #E8521F;
--kd-corail-700: #C2410C; /* corail utilisable en texte sur fond clair */
--kd-corail-800: #9A3412;
--kd-corail-900: #7C2D12;
--kd-ink-0: #FFFFFF;
--kd-ink-50: #F7F5F0; /* « Papier » fond clair */
--kd-ink-100: #EFEDE7;
--kd-ink-200: #E2E0DA;
--kd-ink-300: #C9C8CF;
--kd-ink-400: #8C8FA8;
--kd-ink-500: #6E7190;
--kd-ink-600: #5C5F7A; /* texte secondaire */
--kd-ink-700: #3D3F5A;
--kd-ink-800: #24253F;
--kd-ink-900: #1A1B33; /* texte principal */
--kd-ink-950: #0F1024; /* « Nuit » fond sombre */
--kd-success-50: #DDF5EC;
--kd-success-500: #0F7B5F;
--kd-warning-50: #FFF4DB;
--kd-warning-400: #FFB020; /* fond / pastille, texte encre dessus */
--kd-warning-700: #9A5B00; /* texte */
--kd-error-50: #FDE7E5;
--kd-error-500: #C8322B;
--kd-error-700: #A3241E; /* texte sur fond erreur */
--kd-info-500: var(--kd-indigo-500);
/* ---- Rôles sémantiques (thème clair) -------------------------------- */
--color-primary: var(--kd-indigo-500);
--color-primary-hover: var(--kd-indigo-700);
--color-primary-subtle: var(--kd-indigo-50);
--color-on-primary: #FFFFFF; /* 6,29:1 */
--color-accent: var(--kd-corail-500);
--color-accent-hover: var(--kd-corail-400);
--color-on-accent: var(--kd-ink-950); /* 6,34:1 — pas de blanc (2,85:1) */
--color-accent-text: var(--kd-corail-700);
--color-bg: var(--kd-ink-50); /* papier */
--color-surface: #FFFFFF;
--color-surface-muted: var(--kd-ink-100);
--color-border: var(--kd-ink-200);
--color-border-strong: var(--kd-ink-300);
--color-text: var(--kd-ink-900); /* 15,4:1 sur papier */
--color-text-muted: var(--kd-ink-600); /* 5,7:1 sur papier */
--color-link: var(--kd-indigo-500);
--color-success: var(--kd-success-500);
--color-success-bg: var(--kd-success-50);
--color-warning: var(--kd-warning-700);
--color-warning-bg: var(--kd-warning-50);
--color-warning-solid: var(--kd-warning-400);
--color-error: var(--kd-error-500);
--color-error-text: var(--kd-error-700);
--color-error-bg: var(--kd-error-50);
--color-focus-ring: rgba(74, 58, 255, 0.40);
/* ---- Typographie ----------------------------------------------------- */
--font-display: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-body: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
/* Échelle « tierce majeure » 1,25 — base 16 px */
--text-xs: 0.75rem; /* 12 */
--text-sm: 0.875rem; /* 14 */
--text-base: 1rem; /* 16 */
--text-lg: 1.125rem; /* 18 */
--text-xl: 1.25rem; /* 20 */
--text-2xl: 1.5rem; /* 24 */
--text-3xl: 1.875rem; /* 30 */
--text-4xl: 2.25rem; /* 36 */
--text-5xl: 3rem; /* 48 */
--text-6xl: 3.75rem; /* 60 */
--leading-tight: 1.1; /* titres display */
--leading-snug: 1.25; /* titres */
--leading-normal: 1.5; /* texte courant */
--tracking-display: -0.02em;
--tracking-caps: 0.06em;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-black: 800;
/* ---- Espacements (grille 4 px) ------------------------------------- */
--space-0: 0;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
--tap-target: 44px; /* cible tactile minimale (back-office mobile) */
/* ---- Rayons (écho des « créneaux » du symbole) ---------------------- */
--radius-xs: 4px;
--radius-sm: 8px; /* champs, petits badges */
--radius-md: 12px; /* boutons */
--radius-lg: 16px; /* cartes, créneaux */
--radius-xl: 24px; /* feuilles, modales */
--radius-2xl: 32px;
--radius-full: 9999px; /* chips, avatars */
/* ---- Ombres (teintées encre, jamais noires) ------------------------- */
--shadow-xs: 0 1px 2px rgba(20, 20, 43, 0.06);
--shadow-sm: 0 1px 3px rgba(20, 20, 43, 0.08), 0 1px 2px rgba(20, 20, 43, 0.04);
--shadow-md: 0 4px 12px -2px rgba(20, 20, 43, 0.10), 0 2px 4px -2px rgba(20, 20, 43, 0.06);
--shadow-lg: 0 12px 32px -8px rgba(20, 20, 43, 0.16), 0 4px 8px -4px rgba(20, 20, 43, 0.06);
--shadow-primary: 0 8px 20px -6px rgba(74, 58, 255, 0.45);
--shadow-accent: 0 8px 20px -6px rgba(255, 106, 61, 0.45);
--shadow-focus: 0 0 0 3px var(--color-focus-ring);
/* ---- Mouvement (« au rythme ») ------------------------------------- */
--duration-fast: 120ms;
--duration-base: 200ms;
--duration-slow: 320ms;
--ease-beat: cubic-bezier(0.2, 0.8, 0.2, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
/* ---- Icônes (Lucide) ------------------------------------------------ */
--icon-size-sm: 16px;
--icon-size-md: 20px;
--icon-size-lg: 24px;
--icon-stroke: 2;
}
/* ---- Thème sombre ------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--color-primary: var(--kd-indigo-300); /* 8,0:1 sur nuit */
--color-primary-hover: var(--kd-indigo-200);
--color-primary-subtle: #1F1D4D;
--color-on-primary: var(--kd-ink-950); /* 7,7:1 */
--color-bg: var(--kd-ink-950);
--color-surface: #181935;
--color-surface-muted: #21224A;
--color-border: #2C2E55;
--color-border-strong: #3D3F6B;
--color-text: var(--kd-ink-50); /* 17,2:1 */
--color-text-muted: #A9ABC7; /* 8,3:1 */
--color-link: var(--kd-indigo-300);
--color-accent-text: var(--kd-corail-400);
--color-success: #4FD1A5;
--color-success-bg: #0E2E27;
--color-warning: #FFC85C;
--color-warning-bg: #33260A;
--color-error: #FF8A80;
--color-error-text: #FF8A80;
--color-error-bg: #3A1614;
--color-focus-ring: rgba(166, 158, 255, 0.50);
}
}
:root[data-theme="dark"] {
--color-primary: var(--kd-indigo-300);
--color-primary-hover: var(--kd-indigo-200);
--color-primary-subtle: #1F1D4D;
--color-on-primary: var(--kd-ink-950);
--color-bg: var(--kd-ink-950);
--color-surface: #181935;
--color-surface-muted: #21224A;
--color-border: #2C2E55;
--color-border-strong: #3D3F6B;
--color-text: var(--kd-ink-50);
--color-text-muted: #A9ABC7;
--color-link: var(--kd-indigo-300);
--color-accent-text: var(--kd-corail-400);
--color-success: #4FD1A5;
--color-success-bg: #0E2E27;
--color-warning: #FFC85C;
--color-warning-bg: #33260A;
--color-error: #FF8A80;
--color-error-text: #FF8A80;
--color-error-bg: #3A1614;
--color-focus-ring: rgba(166, 158, 255, 0.50);
}
/* ---- Base minimale ----------------------------------------------------- */
html { font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); }
h1, h2, h3, .kd-display {
font-family: var(--font-display);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-display);
line-height: var(--leading-snug);
}
:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
@media (prefers-reduced-motion: reduce) {
:root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; }
}