/* Design tokens. All colors, typography, spacing, motion live here. Override at the [data-theme="dark"] selector for dark mode. */ :root { color-scheme: light dark; /* ---- accent (vert deep, demande utilisateur) ---- */ --accent: #0F5132; --accent-hover: #146940; --accent-active: #0a3d24; --accent-soft: #E6F0EA; --accent-on: #FFFFFF; /* text/icon on accent */ /* ---- neutrals (light) ---- */ --bg: #FFFFFF; --bg-soft: #FAFAFA; --bg-muted: #F5F5F7; --bg-elev: #FFFFFF; --text: #1D1D1F; --text-muted: #6E6E73; --text-soft: #86868B; --hairline: #D2D2D7; --hairline-strong: #B3B3B8; /* ---- typography ---- */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", "Segoe UI Variable", "Segoe UI", Roboto, system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; --fs-display: clamp(48px, 8.5vw, 104px); --fs-h1: clamp(40px, 6vw, 72px); --fs-h2: clamp(32px, 4.5vw, 56px); --fs-h3: clamp(22px, 2.5vw, 32px); --fs-h4: clamp(18px, 2vw, 22px); --fs-lead: clamp(19px, 2vw, 24px); --fs-body: 17px; --fs-small: 15px; --fs-label: 13px; --lh-display: 1.05; --lh-heading: 1.1; --lh-body: 1.6; --lh-tight: 1.25; --ls-display: -0.035em; --ls-heading: -0.02em; --ls-body: -0.005em; --ls-label: 0.04em; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---- spacing (4px base) ---- */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px; --sp-40: 160px; /* fluid section padding & content widths */ --section-y: clamp(80px, 12vw, 160px); --section-x: clamp(20px, 5vw, 48px); --content-max: 1200px; --content-narrow: 680px; --content-wide: 1440px; /* ---- radius ---- */ --r-xs: 6px; --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px; --r-pill: 9999px; /* ---- shadows ---- */ --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.04); --shadow-sm: 0 2px 8px -2px rgb(0 0 0 / 0.06); --shadow-md: 0 6px 24px -8px rgb(0 0 0 / 0.10); --shadow-lg: 0 20px 48px -16px rgb(0 0 0 / 0.16); --shadow-focus: 0 0 0 4px color-mix(in oklab, var(--accent) 28%, transparent); /* ---- motion ---- */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 200ms; --dur-base: 400ms; --dur-slow: 700ms; --dur-xslow: 1100ms; /* ---- z-index ---- */ --z-skip: 100; --z-nav: 200; --z-toggle: 210; --z-overlay: 800; --z-modal: 900; } /* ---------- dark theme (manual or auto via data-theme) ---------- */ :root[data-theme="dark"] { --bg: #000000; --bg-soft: #0a0a0c; --bg-muted: #1d1d1f; --bg-elev: #1d1d1f; --text: #f5f5f7; --text-muted: #a1a1a6; --text-soft: #6e6e73; --hairline: #1d1d1f; --hairline-strong: #3a3a3c; --accent: #2BA168; /* vert deep relevé pour AA en dark */ --accent-hover: #34b977; --accent-active: #1f8a55; --accent-soft: #0F2F23; --accent-on: #000000; --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4); --shadow-sm: 0 2px 8px -2px rgb(0 0 0 / 0.5); --shadow-md: 0 6px 24px -8px rgb(0 0 0 / 0.6); --shadow-lg: 0 20px 48px -16px rgb(0 0 0 / 0.75); } /* Auto-pick dark when user hasn't explicitly chosen and OS prefers dark. The no-FOUC inline script in sets data-theme so this is mostly a fallback for the brief moment before that script runs. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #000000; --bg-soft: #0a0a0c; --bg-muted: #1d1d1f; --bg-elev: #1d1d1f; --text: #f5f5f7; --text-muted: #a1a1a6; --text-soft: #6e6e73; --hairline: #1d1d1f; --hairline-strong: #3a3a3c; --accent: #2BA168; --accent-hover: #34b977; --accent-active: #1f8a55; --accent-soft: #0F2F23; --accent-on: #000000; } } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-xslow: 0ms; } }