/*
Theme Name:   Coud’Cœur
Description:  Thème enfant de Storefront pour la boutique de créations artisanales Coud’Cœur.
Author:       Coud’Cœur
Template:     storefront
Version:      1.0.0
Requires at least: 6.2
Requires PHP: 7.4
License:      GNU General Public License v3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:  coudcoeur
*/

/*
 * Ce fichier est chargé automatiquement par Storefront (handle « storefront-child-style »).
 * Il ne contient que les variables de design : modifiez-les ici pour ajuster tout le thème.
 * Les styles eux-mêmes sont dans assets/css/.
 */

:root {
	/* Palette « lin et noyer » (les noms violet / lilac / taupe désignent des rôles, pas la teinte) : fonds */
	--cc-color-bg: #f5f3f0;             /* lin grisé très clair */
	--cc-color-surface: #e8e3dd;        /* lin : sections, encadrés */
	--cc-color-surface-strong: #dfd8d0; /* lin appuyé : fonds d’images, survols */
	--cc-color-card: #ffffff;           /* cartes, champs */
	--cc-color-taupe-light: #ecebe8;    /* pierre claire : fond secondaire */

	/* Palette : décor (jamais pour du texte) */
	--cc-color-lilac: #c4b5a6;          /* chanvre : reliefs, ombres décalées, surpiqûres */
	--cc-color-taupe: #b9b6af;          /* pierre : touche secondaire des reliefs et ombres */

	/* Palette : texte et accents lisibles */
	--cc-color-text: #2a221d;           /* brun très foncé (14,1:1 sur le fond) */
	--cc-color-text-muted: #645850;     /* 6,2:1 sur le fond, 5,4:1 sur lin */
	--cc-color-heading: #2a221d;
	--cc-color-violet: #4e3b30;         /* noyer : boutons, liens, titres (9,5:1 sur le fond, 10,5:1 avec texte blanc) */
	--cc-color-violet-dark: #3a2b22;    /* noyer foncé : survols */
	--cc-color-taupe-dark: #4d4a44;     /* texte sur fond pierre (7,4:1) */
	--cc-color-stitch: var(--cc-color-lilac);

	/* Boutons : principal plein, secondaire en contour */
	--cc-color-cta: var(--cc-color-violet);
	--cc-color-cta-hover: var(--cc-color-violet-dark);
	--cc-color-cta-text: #ffffff;
	--cc-color-button-bg: var(--cc-color-card);
	--cc-color-button-hover-bg: var(--cc-color-surface);
	--cc-color-button-text: var(--cc-color-violet);

	/* Liens, bordures, focus */
	--cc-color-link: var(--cc-color-violet);
	--cc-color-link-hover: var(--cc-color-violet-dark);
	--cc-color-border: #e0dad3;         /* séparateurs décoratifs */
	--cc-color-border-strong: #8a7d72;  /* bordures de champs (3,6:1) */
	--cc-color-focus: #2a221d;

	/* États (couleurs fonctionnelles) */
	--cc-color-success: #2e6b45;
	--cc-color-success-bg: #e3efe6;
	--cc-color-error: #b42318;
	--cc-color-error-bg: #fdeceb;
	--cc-color-info: #645850;
	--cc-color-info-bg: var(--cc-color-surface);
	--cc-color-warning: #8a5300;

	/* Typographie (fichiers WOFF2 locaux dans assets/fonts, licence SIL OFL) */
	--cc-font-heading: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
	--cc-font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--cc-font-size-base: 1.0625rem;
	--cc-line-height: 1.65;

	/* Relief des titres : ombres nettes décalées, en em pour suivre la taille sur mobile */
	--cc-relief: 0.05em 0.05em 0 var(--cc-color-lilac);
	--cc-relief-hero: 0.04em 0.04em 0 var(--cc-color-lilac), 0.08em 0.08em 0 var(--cc-color-taupe);

	/* Espacements */
	--cc-space-1: 0.25rem;
	--cc-space-2: 0.5rem;
	--cc-space-3: 0.75rem;
	--cc-space-4: 1rem;
	--cc-space-5: 1.5rem;
	--cc-space-6: 2rem;
	--cc-space-7: 3rem;
	--cc-space-8: 4.5rem;
	--cc-gutter: 1rem;
	--cc-section-gap: clamp(3rem, 2rem + 4vw, 5rem); /* espace entre les sections de l’accueil */

	/* Formes */
	--cc-radius-sm: 10px;
	--cc-radius: 16px;
	--cc-radius-lg: 28px;
	--cc-radius-pill: 999px;
	--cc-offset: 6px;                   /* décalage des ombres nettes (boutons, cartes) */
	--cc-offset-photo: 12px;            /* décalage des encadrements de photos */
	--cc-scallop: 12px;                 /* hauteur des festons */
	--cc-shadow: 0 10px 28px rgba(42, 34, 29, 0.1);

	/* Mise en page */
	--cc-container: 76rem;
	--cc-product-ratio: 1 / 1;         /* cadre des photos produits et catégories (1:1 = recadrage WooCommerce par défaut) */
	--cc-product-fit: contain;         /* contain : création entière visible ; cover : cadre rempli mais bords coupés */
	--cc-transition: 160ms ease;
}

@media (min-width: 48em) {
	:root {
		--cc-gutter: 2rem;
	}
}