/* ═══════════════════════════════════════════════════════════════ DESIGN TOKENS — iFredZ v2 Double thème SANS duplication de variables : chaque jeton est déclaré UNE fois avec light-dark(clair, sombre). La fonction choisit sa valeur selon `color-scheme` — c'est le mécanisme natif du navigateur (Baseline 2024), pas une convention maison. Trois états possibles sur : (rien) → color-scheme: light dark → suit l'OS data-theme="light" → color-scheme: light → forcé clair data-theme="dark" → color-scheme: dark → forcé sombre Le bouton de thème (app/theme.js) ne touche donc JAMAIS aux couleurs : il pose un attribut, la cascade fait le reste. Couleurs en oklch() : espace perceptif uniforme — une même variation de luminosité (L) produit le même effet visuel sur toutes les teintes, ce que hex/HSL ne garantissent pas. ═══════════════════════════════════════════════════════════════ */ :root { /* ─── Mécanisme de thème (voir en-tête) ─────────────────── */ color-scheme: light dark; /* ─── Fonds & encres ────────────────────────────────────── */ --bg: light-dark(oklch(97.5% 0.006 240), oklch(14% 0.018 262)); --card: light-dark(oklch(100% 0 0), oklch(18.5% 0.022 260)); --ink: light-dark(oklch(25% 0.028 255), oklch(94% 0.012 250)); --muted: light-dark(oklch(48% 0.024 252), oklch(72% 0.018 250)); --line: light-dark(oklch(88% 0.012 240), oklch(34% 0.022 258 / 0.55)); /* ─── Accent — l'ambre solaire d'OptiSolar, produit phare ── Plus sombre sur fond clair, plus lumineux sur fond sombre, pour garder un contraste AA dans les deux mondes. */ --accent: light-dark(oklch(60% 0.14 62), oklch(84% 0.124 78)); --accent-contrast: light-dark(oklch(100% 0 0), oklch(20% 0.04 70)); /* ─── Étiquettes de plateforme ────────────────────────────── Vert = Android (Google Play), bleu = navigateur (tous appareils), violet = audio. Ces couleurs PORTENT UN SENS : elles répondent à « où puis-je utiliser ce produit ? ». */ --plat-android-ink: light-dark(oklch(45% 0.11 150), oklch(85% 0.14 152)); --plat-android-bg: light-dark(oklch(95% 0.04 150), oklch(35% 0.07 152 / 0.28)); --plat-web-ink: light-dark(oklch(46% 0.12 252), oklch(82% 0.09 242)); --plat-web-bg: light-dark(oklch(95% 0.03 250), oklch(40% 0.09 250 / 0.28)); --plat-audio-ink: light-dark(oklch(46% 0.14 315), oklch(82% 0.10 315)); --plat-audio-bg: light-dark(oklch(95% 0.03 315), oklch(40% 0.09 315 / 0.28)); /* ─── Ombres — teintées, jamais grises ───────────────────── */ --shadow: light-dark( 0 18px 50px oklch(30% 0.05 250 / 0.10), 0 18px 50px oklch(0% 0 0 / 0.5) ); /* ─── Typographie ───────────────────────────────────────── Display : Bricolage Grotesque — la voix de la marque. Texte : Manrope. Données/labels : JetBrains Mono. */ --font-display: 'Bricolage Grotesque', 'Avenir Next Condensed', sans-serif; --font-body: 'Manrope', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* ─── Échelle typographique fluide ──────────────────────── clamp(min, préféré, max) : la taille suit le viewport entre deux bornes sûres — pas de breakpoint typographique. */ --text-hero: clamp(2.4rem, 5vw + 0.5rem, 3.7rem); --text-section: clamp(1.7rem, 3.2vw + 0.4rem, 2.3rem); --text-card: 1.3rem; --text-body: 1rem; --text-small: 0.85rem; /* ─── Rythme & géométrie ──────────────────────────────────── */ --shell: 1120px; --radius-l: 20px; --radius-m: 12px; --space-section: clamp(56px, 9vh, 96px); } /* Choix explicite du visiteur : on force le color-scheme, light-dark() bascule tous les jetons d'un coup. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; }