/* ========================================================================== AlyCare — Design tokens (CSS custom properties) Palette et typographies par défaut = PLACEHOLDERS en attendant les éléments définitifs fournis par la cliente (ambiance cocooning / spa). Alternatives de palette et de typographie pilotées par [data-palette] et [data-typo] sur , activées par le widget de dev (voir js/theming-widget.js). Ces blocs sont namespacés et strictement additifs : à SUPPRIMER avec le widget avant la mise en prod, les tokens par défaut (:root) resteront inchangés. ========================================================== */ :root { /* ---- Couleurs — palette par défaut "Rose poudré" ---- */ --color-primary: #c98f88; /* rose poudré principal */ --color-primary-dark: #a8695f; /* rose soutenu (hover, accents) */ --color-secondary: #e8c4b8; /* rose clair secondaire */ --color-accent: #b98a6f; /* accent chaleureux (boutons CTA) */ --color-bg: #f9f1ea; /* fond crème chaud */ --color-bg-alt: #f3e4d9; /* fond section alternée */ --color-surface: #ffffff; /* cartes / blocs */ --color-text: #4a3b36; /* texte principal, brun doux */ --color-text-light: #7a655e; /* texte secondaire */ --color-text-on-primary: #ffffff; --color-border: #e7d5c9; --color-success: #7a9471; --color-error: #b5544a; /* ---- Typographies — duo par défaut "Fraunces / Nunito Sans" ---- */ --font-heading: "Fraunces", "Georgia", serif; --font-body: "Nunito Sans", "Segoe UI", sans-serif; --font-size-base: 1rem; --font-size-sm: 0.875rem; --font-size-lg: 1.125rem; --font-size-xl: 1.5rem; --font-size-2xl: 2rem; --font-size-3xl: 2.75rem; --line-height-base: 1.6; --line-height-heading: 1.2; /* ---- Espacements ---- */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; /* ---- Divers ---- */ --radius-sm: 6px; --radius-md: 14px; --radius-lg: 28px; --shadow-soft: 0 8px 24px rgba(74, 59, 54, 0.08); --max-width: 1180px; --transition-base: 0.25s ease; } /* ========================================================================== PALETTES ALTERNATIVES — pilotées par [data-palette] sur Toutes restent dans l'esprit "cocooning / spa" demandé par la cliente, avec des variations de teinte (argile, sauge, brique, taupe, lavande). ========================================================================== */ html[data-palette="argile"] { /* Argile : rose terracotta, plus chaud et terreux */ --color-primary: #c17b5e; --color-primary-dark: #9c5c42; --color-secondary: #e8c9a8; --color-accent: #b3735a; --color-bg: #faf1e6; --color-bg-alt: #f2e2cf; --color-surface: #fffaf3; --color-text: #4a352b; --color-text-light: #8a6f5e; --color-border: #e9d4bd; } html[data-palette="sauge"] { /* Sauge & rose : vert doux apaisant, accent rose poudré */ --color-primary: #a8b89a; --color-primary-dark: #7e9370; --color-secondary: #e3c9b8; --color-accent: #c98f88; --color-bg: #f6f4ec; --color-bg-alt: #ece7d8; --color-surface: #fffefb; --color-text: #3f4238; --color-text-light: #767c6c; --color-border: #dddecf; } html[data-palette="brique"] { /* Rose brique : plus soutenu et dramatique */ --color-primary: #a85d54; --color-primary-dark: #7a3f38; --color-secondary: #dba79a; --color-accent: #8f5245; --color-bg: #f7ece6; --color-bg-alt: #eeddd3; --color-surface: #fffaf7; --color-text: #3d2b26; --color-text-light: #7a5f57; --color-border: #e2c7ba; } html[data-palette="taupe"] { /* Taupe & rose : neutre nude, très doux */ --color-primary: #b8a396; --color-primary-dark: #8f7a6d; --color-secondary: #e3cec0; --color-accent: #c98f88; --color-bg: #f7f3ee; --color-bg-alt: #ece3d9; --color-surface: #fffdfb; --color-text: #45403a; --color-text-light: #837a71; --color-border: #ddd2c6; } html[data-palette="lavande"] { /* Lavande & rose : sérénité, esprit spa */ --color-primary: #b3a0bd; --color-primary-dark: #8a7695; --color-secondary: #e8cfd8; --color-accent: #c98f88; --color-bg: #f8f4f6; --color-bg-alt: #ede3e8; --color-surface: #fffcfd; --color-text: #40353d; --color-text-light: #7d6f77; --color-border: #ded0d8; } /* ========================================================================== TYPOGRAPHIES ALTERNATIVES — pilotées par [data-typo] sur ========================================================================== */ html[data-typo="playfair"] { --font-heading: "Playfair Display", "Georgia", serif; --font-body: "Jost", "Segoe UI", sans-serif; } html[data-typo="dmserif"] { --font-heading: "DM Serif Display", "Georgia", serif; --font-body: "Inter", "Segoe UI", sans-serif; } html[data-typo="garamond"] { --font-heading: "Cormorant Garamond", "Georgia", serif; --font-body: "Poppins", "Segoe UI", sans-serif; } html[data-typo="instrument"] { /* Tendance 2026 : serif éditorial à fort contraste + grotesque géométrique */ --font-heading: "Instrument Serif", "Georgia", serif; --font-body: "Space Grotesk", "Segoe UI", sans-serif; } html[data-typo="bricolage"] { /* Tendance 2026 : display grotesque expressif + grotesque neutre en texte */ --font-heading: "Bricolage Grotesque", "Georgia", serif; --font-body: "Archivo", "Segoe UI", sans-serif; }