/* ------------------------------------------------------------------ * tokens.css — Design system PhytochemHub (Phase 2). * Client : PhytochemHub — autrice publique : Saliha BOUAOUDA. * * Source de vérité (D8 / anti-pattern #20 — RIEN d'inventé) : * - Charte : WP-Saliha/cv-prompt-stitch.md * - Intake : _intake/phytochemhub.yml (section D_direction_artistique) * - Maquettes gelées : WP-Saliha/queue/*.html (light + dark) * · valeurs canoniques confirmées par stitch-cv.html (trio de polices * Space Grotesk / Noto Sans / JetBrains Mono ; fonds #0b0e14 / #151c26) * · les micro-variances des configs Tailwind entre maquettes * (#4b245c / #4e245c / #4c245c pour l'accent, #1b151d pour un fond dark) * sont normalisées sur la charte : accent #4A235A, dark bg #0B0E14. * * Une seule source de couleurs / typo / spacing pour tout le site. * Mode sombre natif via .dark sur (darkMode:"class" des maquettes). * ------------------------------------------------------------------ */ :root { /* --- Couleurs de marque (invariantes light/dark) ------------------ */ --color-primary: #4A235A; /* Deep Phyto Mauve — accent principal */ --color-primary-hover: #9B59B6; /* Luminescent Violet — hover / accent dark */ /* --- Surfaces & texte — MODE LIGHT (défaut) ---------------------- */ --color-bg: #FFFFFF; /* fond général */ --color-surface: #F7F9F9; /* Frost Glass Gray — cartes / sections secondaires */ --color-border: #E2E8F0; /* bordures discrètes */ --color-ink: #1C2833; /* titres intenses */ --color-body: #475569; /* corps de texte */ --color-muted: #64748B; /* métadonnées / dates */ /* Accent visible sur fond clair = primary (contraste garanti, cf. charte) */ --color-accent: var(--color-primary); /* --- Typographie ------------------------------------------------- */ --font-title: "Space Grotesk", "Inter", system-ui, sans-serif; /* display / titres */ --font-body: "Noto Sans", "Inter", system-ui, sans-serif; /* corps, longs paragraphes */ --font-mono: "JetBrains Mono", "Space Mono", ui-monospace, monospace; /* dates, statuts, tags */ /* --- Échelle typographique (dérivée des tailles des maquettes) --- */ --fs-display: clamp(2.5rem, 6vw, 3.75rem); /* hero (text-5xl / text-6xl) */ --fs-h1: clamp(2rem, 5vw, 3rem); /* text-4xl / text-5xl */ --fs-h2: clamp(1.5rem, 3vw, 2.25rem); /* text-2xl / text-3xl */ --fs-h3: 1.25rem; /* text-xl */ --fs-lg: 1.125rem; /* text-lg */ --fs-body: 1rem; /* text-base */ --fs-sm: 0.875rem; /* text-sm — taille dominante des maquettes */ --fs-xs: 0.75rem; /* text-xs — méta / tags mono */ --lh-tight: 1.2; /* titres */ --lh-body: 1.6; /* corps */ --fw-normal: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; /* --- Layout & espacement (max-w-[1280px] des maquettes) --------- */ --container-max: 1280px; --section-pad-y: 80px; /* py-10/py-20 des maquettes → rythme vertical des sections */ --gap: 24px; /* gap-6 dominant */ /* --- Rayons (borderRadius Tailwind stitch-cv : sobre, clinical) -- */ --radius: 0.25rem; /* DEFAULT */ --radius-lg: 0.5rem; /* lg */ --radius-xl: 0.75rem; /* xl — hero / grandes cartes */ --radius-full: 9999px; /* avatars, pastilles */ /* --- Effets d'ambiance « laboratoire high-tech » ---------------- */ --glow-primary: 0 0 0 1px rgba(74, 35, 90, 0.08); /* liseré discret light */ --shadow-card: 0 1px 3px rgba(28, 40, 51, 0.08); } /* ================================================================== * MODE SOMBRE — .dark sur (aligné darkMode:"class" des maquettes) * Void Indigo #0B0E14 (fond) / Matte Slate #151C26 (cartes). * ================================================================== */ .dark { --color-bg: #0B0E14; /* Void Indigo — fond général absolu */ --color-surface: #151C26; /* Matte Slate — cartes / boîtes de contenu */ --color-border: #2A3441; /* bordure dark (liserés discrets, cf. white/10) */ --color-ink: #FDFEFE; /* Fluorine White — titres / texte principal */ --color-body: #94A3B8; /* corps / texte secondaire */ --color-muted: #CBD5E1; /* métadonnées */ /* En dark, l'accent lisible = Luminescent Violet (cf. text-primary-hover) */ --color-accent: var(--color-primary-hover); --glow-primary: 0 0 0 1px rgba(255, 255, 255, 0.10); /* liseré white/10 */ --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.40); } /* Repli pour préférence système si la classe .dark n'est pas encore posée. * Les maquettes pilotent le thème par .dark ; ce bloc évite un flash clair * chez un visiteur en préférence sombre avant hydratation du toggle. */ @media (prefers-color-scheme: dark) { :root:not(.light) { --color-bg: #0B0E14; --color-surface: #151C26; --color-border: #2A3441; --color-ink: #FDFEFE; --color-body: #94A3B8; --color-muted: #CBD5E1; --color-accent: var(--color-primary-hover); } }