/* ========================================================================== REGALITO — DESIGN TOKENS -------------------------------------------------------------------------- Le "cerveau" visuel du site. Changez une valeur ici et tout le site suit. N'écrivez jamais une couleur en dur ailleurs : utilisez var(--…). ========================================================================== */ :root { /* ------------------------------------------------------------------ 1. COULEURS Palette resserrée : encre (foncé) + crème (clair) + or + baie. Moins de couleurs = plus haut de gamme. ------------------------------------------------------------------ */ /* Encre — les fonds sombres, du plus profond au plus doux */ --ink-900: #120d09; /* footer, fonds les plus profonds */ --ink-800: #1b1310; /* sections sombres */ --ink-700: #291d16; /* cartes sur fond sombre */ --ink-600: #3a2a20; /* bordures sur fond sombre */ /* Crème — les fonds clairs, du papier au sable */ --cream-50: #fdfaf5; /* blanc cassé, cartes sur fond clair */ --cream-100: #f9f2e7; /* fond clair principal */ --cream-200: #f2e6d5; /* fond clair alterné */ --cream-300: #e7d6bd; /* bordures sur fond clair */ /* Or — l'accent principal, chaleureux et premium */ --gold-200: #ecd6ac; --gold-400: #d3a962; --gold-500: #c08f42; /* accent de référence */ --gold-600: #a3742f; /* Baie — l'accent secondaire, réservé aux actions fortes */ --berry-500: #b23a52; --berry-600: #97283c; /* boutons principaux */ --berry-700: #7c1f30; /* Vert pistache — accent tertiaire (fraîcheur, badges "frais") */ --leaf-500: #6f7f4c; /* Texte */ --text-on-dark: #f6ecdd; --text-on-dark-soft: rgba(246, 236, 221, 0.64); --text-on-dark-faint: rgba(246, 236, 221, 0.38); --text-on-light: #1a120c; --text-on-light-soft: rgba(26, 18, 12, 0.66); --text-on-light-faint: rgba(26, 18, 12, 0.4); /* Contextuel — redéfini par .on-dark / .on-light / .on-alt. Écrivez toujours color: var(--fg) plutôt qu'une couleur fixe : le composant s'adapte alors automatiquement à sa section. */ --fg: var(--text-on-light); --fg-soft: var(--text-on-light-soft); --fg-faint: var(--text-on-light-faint); --bg: var(--cream-100); --surface: var(--cream-50); --border: rgba(26, 18, 12, 0.12); --border-strong: rgba(26, 18, 12, 0.22); /* ------------------------------------------------------------------ 2. TYPOGRAPHIE Fraunces (serif variable, à taille optique) pour le display, DM Sans pour le texte courant. Deux familles, pas plus. ------------------------------------------------------------------ */ --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif; --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Échelle fluide — se redimensionne toute seule entre mobile et desktop */ --fs-xs: 0.75rem; /* 12px — légendes */ --fs-sm: 0.8125rem; /* 13px — méta */ --fs-base: 0.9375rem; /* 15px — UI */ --fs-md: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --fs-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); --fs-xl: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem); --fs-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem); --fs-3xl: clamp(1.875rem, 1.5rem + 1.8vw, 2.75rem); --fs-4xl: clamp(2.25rem, 1.6rem + 3vw, 4rem); --fs-5xl: clamp(2.75rem, 1.7rem + 4.8vw, 5.75rem); --lh-tight: 1.04; --lh-snug: 1.2; --lh-normal: 1.6; --tracking-display: -0.025em; --tracking-label: 0.16em; /* ------------------------------------------------------------------ 3. ESPACEMENTS ------------------------------------------------------------------ */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 5rem; --space-11: 6.5rem; --section-y: clamp(4.5rem, 9vw, 8.5rem); --container-max: 1280px; --container-pad: clamp(1.25rem, 5vw, 3rem); --measure: 46ch; /* ------------------------------------------------------------------ 4. RAYONS ------------------------------------------------------------------ */ --r-xs: 6px; --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-xl: 40px; --r-pill: 999px; /* ------------------------------------------------------------------ 5. OMBRES — teintées chaud, jamais grises ------------------------------------------------------------------ */ --shadow-xs: 0 1px 2px rgba(37, 24, 15, 0.06); --shadow-sm: 0 2px 8px -2px rgba(37, 24, 15, 0.1); --shadow-md: 0 12px 28px -14px rgba(37, 24, 15, 0.35); --shadow-lg: 0 28px 60px -28px rgba(37, 24, 15, 0.45); --shadow-xl: 0 44px 90px -40px rgba(37, 24, 15, 0.55); --shadow-berry: 0 14px 34px -14px rgba(151, 40, 60, 0.55); /* ------------------------------------------------------------------ 6. MOUVEMENT ------------------------------------------------------------------ */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --dur-fast: 180ms; --dur: 320ms; --dur-slow: 620ms; /* ------------------------------------------------------------------ 7. DIVERS ------------------------------------------------------------------ */ --header-h: 76px; --header-h-scrolled: 64px; --menu-nav-h: 58px; --z-header: 100; --z-modal: 300; } /* -------------------------------------------------------------------------- CONTEXTES DE SECTION Posez .on-dark / .on-light / .on-alt sur une
et tous les composants à l'intérieur (cartes, tags, bordures, boutons fantômes) se recolorent automatiquement. -------------------------------------------------------------------------- */ .on-dark { --fg: var(--text-on-dark); --fg-soft: var(--text-on-dark-soft); --fg-faint: var(--text-on-dark-faint); --bg: var(--ink-800); --surface: var(--ink-700); --border: rgba(246, 236, 221, 0.12); --border-strong: rgba(246, 236, 221, 0.24); background: var(--bg); color: var(--fg); } .on-light { --fg: var(--text-on-light); --fg-soft: var(--text-on-light-soft); --fg-faint: var(--text-on-light-faint); --bg: var(--cream-100); --surface: var(--cream-50); --border: rgba(26, 18, 12, 0.12); --border-strong: rgba(26, 18, 12, 0.22); background: var(--bg); color: var(--fg); } .on-alt { --fg: var(--text-on-light); --fg-soft: var(--text-on-light-soft); --fg-faint: var(--text-on-light-faint); --bg: var(--cream-200); --surface: var(--cream-50); --border: rgba(26, 18, 12, 0.14); --border-strong: rgba(26, 18, 12, 0.24); background: var(--bg); color: var(--fg); } /* -------------------------------------------------------------------------- ACCESSIBILITÉ — respect de "réduire les animations" du système -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }