/* ========================================================================== RevOptimize : design tokens (fichier unique) Clair par défaut ; sombre via (bascule mémorisée). Tous les composants consomment uniquement ces variables. ========================================================================== */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/inter-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/inter-var-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/inter-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { color-scheme: light; /* ---- Typographie ---- */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.0625rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem); --text-3xl: clamp(1.625rem, 1.3rem + 1.3vw, 2.125rem); --text-4xl: clamp(2rem, 1.5rem + 2.4vw, 3.25rem); --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.6; --leading-relaxed: 1.7; --tracking-tight: -0.02em; --tracking-wide: 0.06em; /* ---- Espacements (base 4px) ---- */ --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; --space-20: 5rem; --section-y: clamp(3rem, 2rem + 4vw, 5.5rem); --section-y-sm: clamp(1.75rem, 1.25rem + 2vw, 3rem); /* ---- Rayons, bordures, mouvements ---- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 999px; --border-w: 1px; --transition: 160ms ease; --max-width: 1200px; --narrow-width: 820px; --header-height: 68px; --z-header: 50; --z-menu: 60; --z-skip: 100; /* ---- Palette brute (référence, ne pas utiliser directement) ---- */ --violet-50: #F5F3FF; --violet-100: #EDE9FE; --violet-200: #DDD6FE; --violet-300: #C4B5FD; --violet-400: #A78BFA; --violet-500: #8B5CF6; --violet-600: #7C3AED; --violet-700: #6D28D9; --violet-800: #5B21B6; --violet-900: #4C1D95; /* ---- Tokens sémantiques : CLAIR ---- */ --bg: #FAFAFC; --bg-surface: #FFFFFF; --bg-elevated: #F4F2FA; --bg-muted: #EEECF5; --bg-inverse: #17142B; --bg-header: rgba(250, 250, 252, 0.86); --text: #17142B; --text-secondary: #46425F; --text-muted: #6B6786; --text-inverse: #FFFFFF; --text-on-accent: #FFFFFF; --accent: #6D28D9; --accent-hover: #5B21B6; --accent-text: #5B21B6; --accent-soft: #EDE9FE; --accent-soft-2: #DDD6FE; --accent-ring: rgba(109, 40, 217, 0.35); --gradient-accent: linear-gradient(135deg, #7C3AED 0%, #4C1D95 100%); --gradient-text: linear-gradient(90deg, #6D28D9, #9333EA); --border: #E6E3F0; --border-strong: #CFCADF; --positive: #047857; --positive-bg: #ECFDF5; --positive-border: #A7F3D0; --warning: #B45309; --warning-bg: #FFFBEB; --warning-border: #FDE68A; --negative: #B91C1C; --negative-bg: #FEF2F2; --negative-border: #FECACA; --info: #1D4ED8; --info-bg: #EFF6FF; --info-border: #BFDBFE; --shadow-sm: 0 1px 2px rgba(23, 20, 43, 0.06), 0 1px 3px rgba(23, 20, 43, 0.04); --shadow-md: 0 4px 14px rgba(23, 20, 43, 0.08); --shadow-lg: 0 12px 32px rgba(23, 20, 43, 0.12); --shadow-accent: 0 8px 24px rgba(109, 40, 217, 0.22); /* Plans : fond / texte des badges et accents */ --plan-standard: #475569; --plan-standard-bg: #F1F5F9; --plan-plus: #1D4ED8; --plan-plus-bg: #DBEAFE; --plan-premium: #6D28D9; --plan-premium-bg: #EDE9FE; --plan-metal: #312E81; --plan-metal-bg: #E0E7FF; --plan-ultra: #92400E; --plan-ultra-bg: #FEF3C7; } :root[data-theme="dark"] { color-scheme: dark; --bg: #0F0E1A; --bg-surface: #171530; --bg-elevated: #1E1B3A; --bg-muted: #262245; --bg-inverse: #F4F2FC; --bg-header: rgba(15, 14, 26, 0.84); --text: #F4F2FC; --text-secondary: #C9C4E4; --text-muted: #9F99C2; --text-inverse: #17142B; --text-on-accent: #FFFFFF; --accent: #7C3AED; --accent-hover: #8B5CF6; --accent-text: #C4B5FD; --accent-soft: rgba(139, 92, 246, 0.16); --accent-soft-2: rgba(139, 92, 246, 0.28); --accent-ring: rgba(167, 139, 250, 0.5); --gradient-accent: linear-gradient(135deg, #8B5CF6 0%, #5B21B6 100%); --gradient-text: linear-gradient(90deg, #C4B5FD, #A78BFA); --border: rgba(167, 139, 250, 0.14); --border-strong: rgba(167, 139, 250, 0.32); --positive: #34D399; --positive-bg: rgba(52, 211, 153, 0.12); --positive-border: rgba(52, 211, 153, 0.35); --warning: #FBBF24; --warning-bg: rgba(251, 191, 36, 0.12); --warning-border: rgba(251, 191, 36, 0.35); --negative: #F87171; --negative-bg: rgba(248, 113, 113, 0.12); --negative-border: rgba(248, 113, 113, 0.35); --info: #60A5FA; --info-bg: rgba(96, 165, 250, 0.12); --info-border: rgba(96, 165, 250, 0.35); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.55); --shadow-accent: 0 8px 28px rgba(124, 58, 237, 0.35); --plan-standard: #CBD5E1; --plan-standard-bg: rgba(148, 163, 184, 0.16); --plan-plus: #93C5FD; --plan-plus-bg: rgba(59, 130, 246, 0.18); --plan-premium: #C4B5FD; --plan-premium-bg: rgba(139, 92, 246, 0.2); --plan-metal: #A5B4FC; --plan-metal-bg: rgba(99, 102, 241, 0.2); --plan-ultra: #FCD34D; --plan-ultra-bg: rgba(217, 119, 6, 0.2); }