/* ============================================================ tokens.css — Design System EXKAL Source de vérité : couleurs, spacing, radius, typo, shadows. Ne consommez JAMAIS de valeur en dur, utilisez var(--*). Fonts self-hostées (conformité RGPD — plus de Google Fonts) : - Inter Variable Source : https://rsms.me/inter/font-files/InterVariable.woff2 SHA256 : 693b77d4f32ee9b8bfc995589b5fad5e99adf2832738661f5402f9978429a8e3 - JetBrains Mono Variable (roman only, pas italic) Source : https://raw.githubusercontent.com/JetBrains/JetBrainsMono/master/fonts/webfonts/JetBrainsMono%5Bwght%5D.woff2 Renommé : fonts/JetBrainsMonoVariable.woff2 SHA256 : 31ec365b93e4bad6f202ce23352a56d01ca4462b2afc782ed2cf6fa42ca9ac0e ============================================================ */ /* ---- @font-face : subset latin (français + symboles €, →, ±, …) ---- */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/InterVariable.woff2') format('woff2-variations'), url('fonts/InterVariable.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('fonts/JetBrainsMonoVariable.woff2') format('woff2-variations'), url('fonts/JetBrainsMonoVariable.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ============================================================ :root — Tokens light (default) ============================================================ */ :root { color-scheme: light dark; /* --- Fonds --- */ --color-bg-primary: #FAFAF9; --color-bg-secondary: #F4F4F3; --color-bg-elevated: #FFFFFF; /* --- Bordures (crisp, nettes) --- */ --color-border-subtle: #E7E5E4; --color-border-default: #D6D3D1; --color-border-strong: #A8A29E; /* --- Texte --- */ --color-text-primary: #1C1917; --color-text-secondary: #57534E; --color-text-tertiary: #78716C; /* --- Accents sémantiques --- */ --color-accent: #0F172A; --color-accent-hover: #1E293B; --color-success: #15803D; --color-warning: #B45309; --color-danger: #B91C1C; --color-info: #0369A1; /* --- Overlay (modales, drawers) — noir semi-transparent, indépendant du thème --- */ --color-overlay: rgba(0, 0, 0, 0.5); /* --- Spacing (base 4 px) --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* --- Radius --- */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-full: 9999px; /* --- Layout constants --- */ --header-height: 64px; /* --- Z-index scale --- */ --z-sticky: 10; --z-header: 50; --z-overlay: 99; --z-modal: 100; --z-menu-btn: 200; --z-toast: 1000; /* --- Typographie --- */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace; --text-xs: clamp(11px, 0.75rem, 12px); --text-sm: clamp(12px, 0.875rem, 13px); --text-base: clamp(13px, 0.9375rem, 14px); --text-lg: clamp(15px, 1rem, 16px); --text-xl: clamp(17px, 1.125rem, 18px); --text-2xl: clamp(20px, 1.25rem, 22px); --text-3xl: clamp(24px, 1.5rem, 28px); --font-regular: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65; /* --- Shadows (multi-couches façon Linear/Stripe) --- */ --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.03); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 1px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.04); --shadow-lg: 0 12px 16px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.04); --shadow-xl: 0 24px 32px rgba(0, 0, 0, 0.10), 0 12px 16px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05); --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.06); /* --- Transitions --- */ --transition-fast: 120ms cubic-bezier(0.16, 1, 0.3, 1); --transition-base: 200ms cubic-bezier(0.16, 1, 0.3, 1); --transition-slow: 320ms cubic-bezier(0.16, 1, 0.3, 1); } /* ============================================================ [data-theme="dark"] — Tokens dark Shadows moins visibles, bordures prennent le relais. Accent inversé (blanc sur fond noir pour les CTA primaires). ============================================================ */ [data-theme="dark"] { color-scheme: dark; --color-bg-primary: #0C0A09; --color-bg-secondary: #1C1917; --color-bg-elevated: #292524; --color-border-subtle: #292524; --color-border-default: #44403C; --color-border-strong: #78716C; --color-text-primary: #FAFAF9; --color-text-secondary: #D6D3D1; --color-text-tertiary: #A8A29E; --color-accent: #FAFAF9; --color-accent-hover: #E7E5E4; --color-success: #22C55E; --color-warning: #F59E0B; --color-danger: #EF4444; --color-info: #38BDF8; --color-overlay: rgba(0, 0, 0, 0.7); --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(255, 255, 255, 0.04); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40), 0 1px 1px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(255, 255, 255, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(255, 255, 255, 0.05); --shadow-lg: 0 12px 16px rgba(0, 0, 0, 0.45), 0 4px 6px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06); --shadow-xl: 0 24px 32px rgba(0, 0, 0, 0.50), 0 12px 16px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(255, 255, 255, 0.07); --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.40); } /* ============================================================ prefers-reduced-motion — désactivation globale des animations Les transitions consommant var(--transition-*) sont neutralisées ici. ============================================================ */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition-base: 0ms; --transition-slow: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }