/* * Design tokens — PHI Conseil * Couleurs échantillonnées sur references/phi-conseil-homepage.jpeg (2026-11-08). * Point d'entrée unique : ne pas coder de valeur brute dans les composants. */ :root { /* Couleurs */ --color-ivory-50: #faf7f1; /* fond des sections (services, à propos, footer) */ --color-ivory-100: #f5eee4; /* fond du hero */ --color-ivory-200: #f0e4d2; /* vague ivoire, bouton bandeau */ --color-ivory-300: #eddcc8; --color-pale-100: #e6edf3; --color-pale-200: #d7e0e7; /* encadré témoignage, disques services */ --color-pale-300: #c4cdd6; /* vague bleu pâle */ --color-pale-400: #b7c1ca; /* points de pagination inactifs */ --color-slate-500: #597992; /* boutons bleus */ --color-slate-600: #55738f; /* bandeau final */ --color-slate-700: #4a657f; --color-navy-800: #233a52; --color-navy-900: #1d3047; /* titres */ --color-gold-300: #e3cfae; --color-gold-400: #d2b991; /* coches, guillemets */ --color-gold-500: #c7a075; /* spirale, filets */ --color-gold-600: #bea177; /* filets, motifs */ --color-gold-700: #7c5e34; /* texte doré lisible (AA sur ivoire) */ --color-ink-900: #1f2a33; /* texte courant fort */ --color-ink-700: #3a4652; /* texte courant */ --color-ink-500: #5b6771; /* texte secondaire */ --color-ink-300: #9aa4ad; --color-white: #ffffff; --color-danger: #a23b3b; --color-success: #2f6b4f; /* Typographie */ --font-serif: var(--font-eb-garamond), "Iowan Old Style", Georgia, serif; --font-sans: var(--font-figtree), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); --text-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); --text-xl: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); --text-2xl: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem); --text-3xl: clamp(1.75rem, 1.3rem + 1.1vw, 2.25rem); --text-4xl: clamp(2rem, 1.55rem + 1.7vw, 2.75rem); --text-display: clamp(2.5rem, 1.55rem + 3.3vw, 4.25rem); --leading-tight: 1.05; --leading-snug: 1.2; --leading-normal: 1.55; --tracking-caps: 0.14em; /* Espacements */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --section-y: clamp(3rem, 2rem + 4vw, 5.5rem); --container-max: 1180px; --container-pad: clamp(1.25rem, 4vw, 3rem); /* Rayons */ --radius-sm: 0.375rem; --radius-md: 0.75rem; --radius-lg: 1.25rem; --radius-xl: 1.75rem; --radius-pill: 999px; /* Ombres */ --shadow-sm: 0 1px 2px rgba(29, 48, 71, 0.06); --shadow-md: 0 6px 18px rgba(29, 48, 71, 0.1); --shadow-lg: 0 18px 40px rgba(29, 48, 71, 0.14); /* Mouvement */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 450ms; /* Points de rupture (référence, Tailwind utilise les siens) */ --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px; }