/* ============================================================================ GITALDI — DESIGN TOKENS Charte : voir BRAND.md (source de vérité). Light-first, corporate tech. Bleu marine dominant (#1B3A5C), or en accent discret (#C9A961), fond crème. Source unique de vérité : on référence ces variables partout, jamais de valeur en dur. Les noms sémantiques permettent à l'admin (couleurs/typo) de piloter. ========================================================================== */ @layer tokens, base, components, sections, utilities; @layer tokens { :root { /* --- Brand primitives (charte GITALDI) ----------------------------- */ --c-blue: #2C4A6B; /* blocs, UI, titres secondaires */ --c-blue-deep: #1B3A5C; /* PRINCIPALE : titres, boutons, footer */ --c-gold: #C9A961; /* accent discret seulement */ --c-gold-soft: #E8D8AC; --c-cream: #FAF8F3; /* fond principal */ --c-cream-200: #F2EFE8; /* fond alterné */ --c-line: #E4DFD4; --c-line-blue: rgba(27, 58, 92, 0.12); --c-whatsapp: #25D366; /* === LIGHT — mode principal & défaut ================================ */ --bg: var(--c-cream); --bg-elevated: #FFFFFF; --bg-subtle: var(--c-cream-200); --bg-card: #FFFFFF; --bg-blue: var(--c-blue-deep); /* bandes/blocs bleus */ --ink: var(--c-blue-deep); --ink-deep: var(--c-blue-deep); --ink-soft: #3F5C7D; --ink-muted: #6E7C8C; --line: var(--c-line); --line-strong: #D6CFBF; --line-blue: var(--c-line-blue); --accent: var(--c-blue-deep); /* boutons / blocs : bleu marine */ --on-accent: var(--c-cream); --highlight: var(--c-gold); /* accent or discret */ --highlight-ink: #9B7C34; /* or assez foncé pour texte sur clair */ --highlight-soft:var(--c-gold-soft); --whatsapp: var(--c-whatsapp); --success: #2F8F5B; --success-bg: #E6F2EA; --warn: #B0813A; /* Dégradés / formes douces — bleus très subtils (pas de halo doré) */ --glow-cool: radial-gradient(circle, rgba(44,74,107,0.10) 0%, transparent 62%); --glow-soft: radial-gradient(circle, rgba(27,58,92,0.07) 0%, transparent 64%); --glow-gold: radial-gradient(circle, rgba(201,169,97,0.10) 0%, transparent 66%); --card-grad: linear-gradient(165deg, rgba(255,255,255,0.9) 0%, rgba(250,248,243,0.5) 100%); --hairline: linear-gradient(90deg, var(--highlight), transparent); /* Footer */ --footer-bg: var(--c-blue-deep); --footer-text: var(--c-cream-200); --footer-heading: var(--c-gold); --footer-link: var(--c-cream-200); /* --- Typographie : Inter Tight partout par défaut (titres + corps) ---- Le rôle « Titres » (--font-serif) défaut sur Inter Tight comme la home. Pilotable depuis Admin → Typographie ; Fraunces reste dispo si choisi. */ --font-display: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-serif: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --fs-mega: clamp(3.5rem, 13vw, 12rem); --fs-display: clamp(2.6rem, 7.6vw, 6.6rem); /* hero h1 */ --fs-h1: var(--fs-display); --fs-h2: clamp(2.1rem, 5.6vw, 4.3rem); --fs-h3: clamp(1.7rem, 3.6vw, 2.9rem); --fs-h4: clamp(1.3rem, 2.4vw, 1.85rem); --fs-lead: clamp(1.1rem, 1.5vw, 1.35rem); --fs-body: 1.0625rem; --fs-sm: 0.9375rem; --fs-xs: 0.8125rem; --fs-mono: 0.75rem; --lh-tight: 0.94; --lh-snug: 1.05; --lh-heading: 1.04; --lh-body: 1.65; --lh-relaxed: 1.75; --tracking-tight: -0.04em; --tracking-snug: -0.02em; --tracking-label: 0.18em; /* --- Spacing --------------------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 9rem; --section-y: clamp(5rem, 10vw, 10rem); /* --- Layout ---------------------------------------------------------- */ --container: 1280px; --container-wide: 1500px; --container-pad: clamp(1.25rem, 4vw, 2.5rem); /* --- Radii ----------------------------------------------------------- */ --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-pill: 999px; --radius-full: 50%; /* --- Shadows (douces, bleutées) ------------------------------------- */ --shadow-xs: 0 2px 10px rgba(27, 58, 92, 0.05); --shadow-sm: 0 8px 24px rgba(27, 58, 92, 0.07); --shadow-md: 0 16px 40px rgba(27, 58, 92, 0.10); --shadow-lg: 0 28px 70px rgba(27, 58, 92, 0.14); --shadow-whatsapp: 0 8px 24px rgba(37, 211, 102, 0.4); /* --- Motion ---------------------------------------------------------- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-io: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 0.25s; --dur-med: 0.45s; --dur-slow: 0.9s; --z-nav: 100; --z-float: 99; --z-progress: 101; --z-cursor: 9999; color-scheme: light; } /* --- DARK : toggle optionnel uniquement (jamais par défaut) ----------- */ [data-theme='dark'] { --bg: #0F1722; --bg-elevated: #16202E; --bg-subtle: #131C28; --bg-card: #16202E; --bg-blue: #16202E; --ink: #E8EDF3; --ink-deep: #FFFFFF; --ink-soft: #B6C0CD; --ink-muted: #7E8C9C; --line: rgba(255, 255, 255, 0.10); --line-strong: rgba(255, 255, 255, 0.18); --line-blue: rgba(255, 255, 255, 0.10); --accent: var(--c-gold); --on-accent: #0F1722; --highlight: #D8B978; --highlight-ink: #D8B978; --highlight-soft:rgba(216, 185, 120, 0.16); --success: #4ADE80; --success-bg: #122018; --warn: #E0A94A; --glow-cool: radial-gradient(circle, rgba(44,74,107,0.30) 0%, transparent 60%); --glow-soft: radial-gradient(circle, rgba(44,74,107,0.22) 0%, transparent 62%); --glow-gold: radial-gradient(circle, rgba(216,185,120,0.12) 0%, transparent 66%); --card-grad: linear-gradient(165deg, rgba(255,255,255,0.05) 0%, transparent 100%); --footer-bg: #0B1119; --shadow-xs: 0 2px 12px rgba(0, 0, 0, 0.30); --shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.40); --shadow-md: 0 20px 50px rgba(0, 0, 0, 0.50); --shadow-lg: 0 34px 90px rgba(0, 0, 0, 0.62); color-scheme: dark; } }