/* ========================================================================= Kaï Consulting — Design System v2 — TOKENS Best practices 2026 : - Palette OKLCH (gamut P3, gradients perceptuellement uniformes) - Fluid type scale (clamp, no breakpoints) - Spacing scale étendue (4px base, jusqu'à 256px) - Shadows teintées via color-mix() - Motion tokens sémantiques ========================================================================= */ :root { /* ===================================================================== 1. COULEURS — Palette OKLCH (lightness/chroma/hue) ===================================================================== */ /* Brand — Rouge Kaï (hue ≈ 25, chroma riche) */ --kai-50: oklch(98% 0.005 25); --kai-100: oklch(94% 0.022 25); --kai-200: oklch(88% 0.052 25); --kai-300: oklch(79% 0.105 25); --kai-400: oklch(67% 0.160 25); --kai-500: oklch(58% 0.185 25); --kai-600: oklch(50% 0.180 25); /* couleur signature */ --kai-700: oklch(43% 0.155 25); --kai-800: oklch(36% 0.125 25); --kai-900: oklch(28% 0.090 25); --kai-950: oklch(18% 0.060 25); /* Neutres chauds (hue ≈ 30, chroma très bas pour rester neutre) */ --ink-50: oklch(98.5% 0.004 30); --ink-100: oklch(96% 0.005 30); --ink-200: oklch(91% 0.006 30); --ink-300: oklch(82% 0.008 30); --ink-400: oklch(66% 0.010 30); --ink-500: oklch(52% 0.011 30); --ink-600: oklch(40% 0.012 30); --ink-700: oklch(30% 0.012 30); --ink-800: oklch(22% 0.010 30); --ink-900: oklch(15% 0.008 30); --ink-950: oklch(9% 0.006 30); /* Sémantiques */ --success: oklch(55% 0.130 150); --warning: oklch(72% 0.150 70); --info: oklch(58% 0.130 230); --danger: oklch(58% 0.200 25); /* ===================================================================== 2. TYPOGRAPHIE — Fluid scale via clamp() Base : 16px → 18px de mobile à desktop Ratio : 1.250 (major third) — éditorial moderne ===================================================================== */ /* Familles */ --font-ui: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Échelle fluide — chaque taille s'adapte de mobile à desktop */ --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); /* 12-13 */ --text-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem); /* 14-15 */ --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 16-18 */ --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); /* 18-21 */ --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); /* 20-24 */ --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem); /* 24-30 */ --text-3xl: clamp(1.875rem, 1.6rem + 1.4vw, 2.625rem); /* 30-42 */ --text-4xl: clamp(2.25rem, 1.85rem + 2vw, 3.375rem); /* 36-54 */ --text-5xl: clamp(2.75rem, 2.15rem + 3vw, 4.5rem); /* 44-72 */ --text-6xl: clamp(2.5rem, 1.5rem + 4.5vw, 6rem); /* 40-96 (40 mobile, 88 @ 1440) */ /* Line heights — système tight/normal/relaxed */ --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.7; /* Letter spacing */ --tracking-tighter: -0.04em; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-widest: 0.16em; /* Font weights */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ===================================================================== 3. ESPACEMENT — Base 4px, étendu jusqu'à 256px (breathing room 2026) ===================================================================== */ --sp-px: 1px; --sp-0-5: 2px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px; --sp-11: 80px; --sp-12: 96px; --sp-13: 128px; --sp-14: 160px; --sp-15: 192px; --sp-16: 256px; /* Fluid spacing pour les transitions de sections */ --space-section: clamp(var(--sp-10), 8vw, var(--sp-13)); /* 64-128 */ --space-section-lg: clamp(var(--sp-11), 12vw, var(--sp-15)); /* 80-192 */ --space-gutter: clamp(var(--sp-4), 4vw, var(--sp-7)); /* 16-32 — padding latéral */ /* ===================================================================== 4. BORDER-RADIUS ===================================================================== */ --r-none: 0; --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px; --r-3xl: 40px; --r-full: 999px; /* Squircle iOS-style pour les avatars / logo (22% du côté) */ --r-squircle: 22%; /* ===================================================================== 5. OMBRES — Teintées via color-mix() avec le brand ===================================================================== */ --shadow-color: oklch(15% 0.008 30); /* ink-900 */ --s-xs: 0 1px 2px 0 color-mix(in oklch, var(--shadow-color) 6%, transparent); --s-sm: 0 2px 4px -1px color-mix(in oklch, var(--shadow-color) 10%, transparent), 0 1px 2px -1px color-mix(in oklch, var(--shadow-color) 6%, transparent); --s-md: 0 8px 16px -3px color-mix(in oklch, var(--shadow-color) 12%, transparent), 0 2px 6px -2px color-mix(in oklch, var(--shadow-color) 8%, transparent); --s-lg: 0 16px 32px -6px color-mix(in oklch, var(--shadow-color) 14%, transparent), 0 4px 12px -4px color-mix(in oklch, var(--shadow-color) 10%, transparent); --s-xl: 0 24px 56px -8px color-mix(in oklch, var(--shadow-color) 18%, transparent), 0 8px 24px -6px color-mix(in oklch, var(--shadow-color) 12%, transparent); /* Ombre signature — teintée brand */ --s-brand: 0 8px 24px -4px color-mix(in oklch, var(--kai-700) 35%, transparent); --s-brand-lg: 0 16px 48px -6px color-mix(in oklch, var(--kai-700) 40%, transparent); /* Glow focus — ring teinté */ --ring-brand: 0 0 0 3px color-mix(in oklch, var(--kai-700) 30%, transparent); /* ===================================================================== 6. MOTION — Tokens sémantiques (durée + easing) Standard 2026 : durées courtes (snappy) ou longues (graceful) ===================================================================== */ --duration-instant: 80ms; --duration-snappy: 160ms; --duration-fluid: 240ms; --duration-graceful: 360ms; --duration-cinematic: 600ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* expo-out, signature 2026 */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* quart in-out */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* back-out (spring subtil) */ --ease-linear: linear; /* Transitions composées */ --transition-snappy: all var(--duration-snappy) var(--ease-out); --transition-fluid: all var(--duration-fluid) var(--ease-out); --transition-graceful: all var(--duration-graceful) var(--ease-out); /* ===================================================================== 7. Z-INDEX — Scale sémantique ===================================================================== */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-dropdown: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; /* ===================================================================== 8. BREAKPOINTS (référence — utilisés en JS / scope @container) En CSS, on privilégie les container queries (cf. components) ===================================================================== */ --bp-xs: 480px; --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px; /* ===================================================================== 9. LAYOUT — Largeurs maximales ===================================================================== */ --max-prose: 65ch; /* texte lisible (article) */ --max-content: 1280px; /* contenu standard */ --max-wide: 1440px; /* hero éditorial, asymétrie */ --max-full: 100%; }