/** * Design tokens — charte graphique AM Photographie * Toutes les couleurs/espacements du site doivent référencer ces variables : * aucune couleur "en dur" ailleurs dans le CSS. */ :root { /* Couleurs */ --color-bg: #111111; --color-bg-elevated: #1a1a1a; --color-bg-elevated-2: #202020; --color-primary: #ffffff; --color-secondary: #d4af37; /* Or — accents premium, CTA, hover */ --color-secondary-dim: #b3922f; --color-accent: #888888; /* Textes secondaires, séparateurs */ --color-border: rgba(255, 255, 255, 0.08); --color-overlay: rgba(17, 17, 17, 0.72); /* Typographie */ --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Échelle de taille — clamp() pour une typographie fluide sans rupture aux breakpoints */ --fs-xs: 0.8rem; --fs-sm: 0.9rem; --fs-base: 1rem; --fs-lg: clamp(1.1rem, 1rem + 0.5vw, 1.25rem); --fs-xl: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); --fs-2xl: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); --fs-3xl: clamp(2.1rem, 1.4rem + 3vw, 3.5rem); --fs-4xl: clamp(2.4rem, 1.4rem + 4.5vw, 4.5rem); /* Espacements */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; /* Transitions — fluides, jamais kitsch */ --transition-fast: 0.2s ease; --transition-base: 0.4s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.8s cubic-bezier(0.4, 0, 0.2, 1); /* Mise en page */ --container-max: 1320px; --radius-sm: 4px; --radius-md: 8px; --header-height: 90px; --shadow-elevated: 0 20px 60px rgba(0, 0, 0, 0.45); } /* Mode clair (bonus, activé via data-theme="light" sur ) */ :root[data-theme='light'] { --color-bg: #f7f6f3; --color-bg-elevated: #ffffff; --color-bg-elevated-2: #f0efec; --color-primary: #111111; --color-accent: #6b6b6b; --color-border: rgba(0, 0, 0, 0.08); --color-overlay: rgba(247, 246, 243, 0.85); }