/* ================================================================ TÉLIAU DESIGN SYSTEM — Colors & Type Premium · Technical-expert · Hero + Sage Light & Dark at parity. Base unit: 4px. Type ratio: 1.250. ---------------------------------------------------------------- Source de vérité de la charte (reprise conforme de colors_and_type.css). Les composants consomment les jetons SÉMANTIQUES (--surface-*, --fg-*, --accent-*, …), jamais les primitives. Police servie localement (hors-ligne). ================================================================ */ /* ---------------------------------------------------------------- FONTS — Geist & Geist Mono, served locally from /fonts ---------------------------------------------------------------- */ @font-face { font-family: 'Geist'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/Geist-Regular.woff2') format('woff2'); } @font-face { font-family: 'Geist'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/Geist-Medium.woff2') format('woff2'); } @font-face { font-family: 'Geist'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/Geist-SemiBold.woff2') format('woff2'); } @font-face { font-family: 'Geist'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/Geist-Bold.woff2') format('woff2'); } @font-face { font-family: 'Geist'; font-weight: 800; font-style: normal; font-display: swap; src: url('fonts/Geist-Black.woff2') format('woff2'); } @font-face { font-family: 'Geist Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/GeistMono-Regular.woff2') format('woff2'); } @font-face { font-family: 'Geist Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/GeistMono-Medium.woff2') format('woff2'); } @font-face { font-family: 'Geist Mono'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/GeistMono-SemiBold.woff2') format('woff2'); } /* ================================================================ 1. PRIMITIVES — raw values, never used directly in components ================================================================ */ :root { /* ---- Neutral scale (slightly cool, not pure gray) ---- */ --neutral-0: #ffffff; --neutral-50: #f7f8f9; --neutral-100: #eff1f3; --neutral-200: #e3e6ea; --neutral-300: #cbd0d7; --neutral-400: #a3aab5; --neutral-500: #767e8b; --neutral-600: #545b66; --neutral-700: #3c424b; --neutral-800: #262a31; --neutral-900: #161a1f; --neutral-950: #0c0e12; --neutral-1000: #07080a; /* ---- Accent — Deep Saturated Blue (premium institutional) ---- */ --accent-50: #eef4ff; --accent-100: #d9e6ff; --accent-200: #b8d0ff; --accent-300: #8db1ff; --accent-400: #5c8aff; --accent-500: #3a66f5; /* primary */ --accent-600: #2a4ee0; --accent-700: #233dba; --accent-800: #1f3493; --accent-900: #1c2d72; --accent-950: #131c47; /* ---- Semantic palettes (saturated but tuned to neutrals) ---- */ --success-50: #ecfdf3; --success-200: #b7ebca; --success-500: #16a34a; --success-600: #157f3a; --success-700: #115e2e; --warning-50: #fff8eb; --warning-200: #fde0a4; --warning-500: #d97706; --warning-600: #b45309; --warning-700: #8a3f08; --danger-50: #fef2f2; --danger-200: #fbc5c5; --danger-500: #dc2626; --danger-600: #b91c1c; --danger-700: #8f1717; --info-50: #eef4ff; --info-200: #b8d0ff; --info-500: #3a66f5; --info-600: #2a4ee0; --info-700: #233dba; /* ---- Typography primitives ---- */ --font-sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --font-display: 'Geist', 'Inter', -apple-system, sans-serif; /* same family, heavier weight */ /* ---- Type scale (base 16, ratio 1.250) ---- */ --text-xs: 12px; --lh-xs: 16px; --text-sm: 14px; --lh-sm: 20px; --text-base: 16px; --lh-base: 24px; --text-lg: 18px; --lh-lg: 28px; --text-xl: 20px; --lh-xl: 28px; --text-2xl: 24px; --lh-2xl: 32px; --text-3xl: 30px; --lh-3xl: 36px; --text-4xl: 36px; --lh-4xl: 40px; --text-5xl: 48px; --lh-5xl: 52px; --text-6xl: 60px; --lh-6xl: 64px; --text-7xl: 72px; --lh-7xl: 76px; /* ---- Tracking ---- */ --tracking-display: -0.035em; --tracking-heading: -0.02em; --tracking-body: 0; --tracking-mono: 0; --tracking-caps: 0.06em; /* ---- Weights ---- */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-heavy: 800; /* ---- Spacing (4pt grid) ---- */ --space-0: 0; --space-0-5: 2px; --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; --space-20: 80px; --space-24: 96px; /* ---- Radius ---- */ --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* ---- Elevation — layered, subtle ---- */ --elevation-0: none; --elevation-1: 0 1px 2px rgba(12, 14, 18, 0.04), 0 1px 3px rgba(12, 14, 18, 0.06); --elevation-2: 0 2px 4px rgba(12, 14, 18, 0.05), 0 4px 8px rgba(12, 14, 18, 0.08); --elevation-3: 0 8px 16px rgba(12, 14, 18, 0.08), 0 16px 32px rgba(12, 14, 18, 0.10); --elevation-4: 0 16px 32px rgba(12, 14, 18, 0.12), 0 32px 64px rgba(12, 14, 18, 0.14); /* ---- Motion ---- */ --duration-fast: 150ms; --duration-base: 200ms; --duration-slow: 300ms; --duration-page: 400ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* ---- Focus ring ---- */ --focus-ring-width: 2px; --focus-ring-offset: 2px; } /* ================================================================ 2. SEMANTIC TOKENS — LIGHT MODE (défaut) ================================================================ */ :root, [data-theme="light"] { --surface-page: var(--neutral-50); --surface-base: var(--neutral-0); --surface-raised: var(--neutral-0); --surface-overlay: var(--neutral-0); --surface-sunken: var(--neutral-100); --surface-inverse: var(--neutral-900); --fg-primary: var(--neutral-900); --fg-secondary: var(--neutral-700); --fg-tertiary: var(--neutral-500); --fg-disabled: var(--neutral-400); --fg-inverse: var(--neutral-0); --fg-on-accent: var(--neutral-0); --fg-link: var(--accent-600); --fg-link-hover: var(--accent-700); --border-subtle: var(--neutral-100); --border-default: var(--neutral-200); --border-strong: var(--neutral-300); --border-inverse: var(--neutral-800); --border-focus: var(--accent-500); --accent-bg: var(--accent-500); --accent-bg-hover: var(--accent-600); --accent-bg-active: var(--accent-700); --accent-bg-subtle: var(--accent-50); --accent-fg: var(--accent-600); --accent-fg-strong: var(--accent-700); --accent-border: var(--accent-200); --success-bg: var(--success-500); --success-bg-subtle: var(--success-50); --success-fg: var(--success-700); --success-border: var(--success-200); --warning-bg: var(--warning-500); --warning-bg-subtle: var(--warning-50); --warning-fg: var(--warning-700); --warning-border: var(--warning-200); --danger-bg: var(--danger-500); --danger-bg-subtle: var(--danger-50); --danger-fg: var(--danger-700); --danger-border: var(--danger-200); --info-bg: var(--info-500); --info-bg-subtle: var(--info-50); --info-fg: var(--info-700); --info-border: var(--info-200); --state-hover: rgba(12, 14, 18, 0.04); --state-active: rgba(12, 14, 18, 0.08); --state-selected: var(--accent-50); --focus-ring: 0 0 0 var(--focus-ring-offset) var(--surface-base), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--accent-500); color-scheme: light; } /* ================================================================ 3. SEMANTIC TOKENS — DARK MODE (palette parallèle) ================================================================ */ [data-theme="dark"] { --surface-page: var(--neutral-1000); --surface-base: var(--neutral-950); --surface-raised: var(--neutral-900); --surface-overlay: var(--neutral-800); --surface-sunken: var(--neutral-1000); --surface-inverse: var(--neutral-50); --fg-primary: var(--neutral-50); --fg-secondary: var(--neutral-300); --fg-tertiary: var(--neutral-400); --fg-disabled: var(--neutral-600); --fg-inverse: var(--neutral-950); --fg-on-accent: var(--neutral-0); --fg-link: var(--accent-300); --fg-link-hover: var(--accent-200); --border-subtle: var(--neutral-900); --border-default: var(--neutral-800); --border-strong: var(--neutral-700); --border-inverse: var(--neutral-200); --border-focus: var(--accent-400); --accent-bg: var(--accent-500); --accent-bg-hover: var(--accent-400); --accent-bg-active: var(--accent-300); --accent-bg-subtle: rgba(58, 102, 245, 0.12); --accent-fg: var(--accent-300); --accent-fg-strong: var(--accent-200); --accent-border: var(--accent-800); --success-bg: var(--success-500); --success-bg-subtle: rgba(22, 163, 74, 0.12); --success-fg: #6ee7a3; --success-border: rgba(22, 163, 74, 0.32); --warning-bg: var(--warning-500); --warning-bg-subtle: rgba(217, 119, 6, 0.12); --warning-fg: #fbbf24; --warning-border: rgba(217, 119, 6, 0.32); --danger-bg: var(--danger-500); --danger-bg-subtle: rgba(220, 38, 38, 0.12); --danger-fg: #f87171; --danger-border: rgba(220, 38, 38, 0.32); --info-bg: var(--info-500); --info-bg-subtle: rgba(58, 102, 245, 0.12); --info-fg: var(--accent-300); --info-border: rgba(58, 102, 245, 0.32); --state-hover: rgba(255, 255, 255, 0.05); --state-active: rgba(255, 255, 255, 0.09); --state-selected: rgba(58, 102, 245, 0.16); --focus-ring: 0 0 0 var(--focus-ring-offset) var(--surface-base), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--accent-400); --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3); --elevation-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.4); --elevation-3: 0 8px 16px rgba(0, 0, 0, 0.5), 0 16px 32px rgba(0, 0, 0, 0.5); --elevation-4: 0 16px 32px rgba(0, 0, 0, 0.6), 0 32px 64px rgba(0, 0, 0, 0.7); color-scheme: dark; } /* ================================================================ 4. ELEMENT STYLES — base typography & semantic HTML ================================================================ */ html { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--lh-base); color: var(--fg-primary); background: var(--surface-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'cv11', 'ss01', 'ss03'; } body { margin: 0; font-family: var(--font-sans); color: var(--fg-primary); background: var(--surface-page); } code, kbd, samp, pre, .code { font-family: var(--font-mono); font-size: 0.92em; font-feature-settings: 'zero', 'ss01'; } a { color: var(--fg-link); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } a:hover { color: var(--fg-link-hover); } ::selection { background: var(--accent-200); color: var(--neutral-900); } [data-theme="dark"] ::selection { background: var(--accent-800); color: var(--neutral-0); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }