/*
* Zephyr Design System — Tokens
* Inject via YOOtheme: Site > Settings > Custom Code >
* Or prepend to Joomla template.css
*
* Google Fonts preconnect — add these 2 tags in BEFORE this file:
*
*
*
*
*/
:root {
/* --- Couleurs --- */
--color-bg-warm: #F8F4EE; /* sable chaud — fond principal */
--color-bg-light: #FFFFFF; /* blanc pur */
--color-accent: #1A6B6B; /* turquoise profond / teal premium */
--color-accent-hover: #145454;
--color-text: #1C2B2B; /* charbon marine */
--color-text-secondary: #5A7070;
--color-border: #DDD6CB;
--color-success: #2A7A4A;
--color-error: #C0392B;
--color-overlay: rgba(28, 43, 43, 0.45);
/* --- Typographie --- */
--font-heading: 'Cormorant Garamond', Georgia, serif;
--font-body: 'Lato', system-ui, sans-serif;
--font-size-base: 16px;
--font-size-sm: 14px;
--font-size-lg: 20px;
--font-size-xl: 28px;
--font-size-2xl: 40px;
--font-size-3xl: 56px;
--line-height-base: 1.6;
--line-height-heading: 1.2;
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* --- Spacing scale (base 4px) --- */
--space-1: 4px;
--space-2: 8px;
--space-3: 16px;
--space-4: 24px;
--space-5: 32px;
--space-6: 48px;
--space-7: 64px;
--space-8: 96px;
--space-9: 128px;
/* --- Breakpoints (pour @media — valeurs de référence) ---
--bp-sm: 640px | --bp-md: 1024px | --bp-lg: 1280px */
/* --- Radius --- */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--radius-pill: 100px;
/* --- Shadows --- */
--shadow-card: 0 2px 16px rgba(28, 43, 43, 0.08);
--shadow-cta: 0 4px 24px rgba(26, 107, 107, 0.25);
--shadow-elevated: 0 8px 32px rgba(28, 43, 43, 0.14);
/* --- Transitions --- */
--transition-fast: 150ms ease;
--transition-base: 250ms ease;
/* --- Z-index layers --- */
--z-overlay: 10;
--z-sticky: 100;
--z-dialog: 200;
}