/* =============================================================================
   lilpaws-shop — tokens.css
   Variables de design (DESIGN.md §2 & §3) + polices.
   Source unique des couleurs/typo/rayons. Ne pas mettre de mise en page ici.
   ========================================================================== */

/* --- Polices web : fallbacks Google Fonts (DESIGN §3) ----------------------
   On développe avec Fraunces / Comfortaa / Pacifico. On basculera vers
   Hildor / Socheerful sous licence en activant les @font-face plus bas.
   NB : la règle @import doit rester en tête de fichier. */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Pacifico&display=swap');

:root {
    /* --- Couleurs de marque (guide BRAND COLOR) --- */
    --cream:      #FDF7ED;  /* fond principal clair */
    --beige:      #EDDDC2;  /* fond secondaire, cartes, sections douces */
    --terracotta: #D68B54;  /* accent chaud, header, sections colorées */
    --olive:      #C9CBA9;  /* éléments graphiques, badges, douceur nature */
    --gold:       #CD9B44;  /* accent premium : filets, titres décoratifs, hover */

    /* --- Neutres fonctionnels (lisibilité / WCAG) --- */
    --ink:        #3D2F20;  /* texte principal sur fonds clairs */
    --ink-soft:   #7A6A55;  /* texte secondaire */
    --line:       #E7D9C2;  /* filets, bordures discrètes */

    /* --- Variantes interactives accessibles --- */
    --terracotta-deep: #B86B3A; /* CTA / liens : contraste AA avec texte crème */
    --terracotta-darker: #A25F31; /* hover du CTA primaire */

    /* --- Typographie (DESIGN §3) --- */
    --font-title:     "Hildor", "Fraunces", Georgia, serif;
    --font-body:      "Comfortaa", system-ui, sans-serif;
    --font-highlight: "Socheerful", "Pacifico", cursive;

    /* Échelle typographique indicative */
    --h1: clamp(2.4rem, 5vw, 4rem);
    --h2: 2rem;
    --leading: 1.6;

    /* --- Formes arrondies / arches (DESIGN §5) --- */
    --radius-sm:   12px;
    --radius-md:   18px;
    --radius-lg:   24px;
    --radius-pill: 999px;

    /* --- Ombres très douces et chaudes (DESIGN §5) --- */
    --shadow-soft: 0 10px 30px -12px rgba(61, 47, 32, .25);
    --shadow-card: 0 6px 20px -10px rgba(61, 47, 32, .20);

    /* --- Layout --- */
    --maxw: 1140px;
    --gutter: 1.25rem;
}

/* =============================================================================
   @font-face — SQUELETTE pour les polices sous licence (Hildor / Socheerful).
   Activer en décommentant quand les .woff2 sont fournis par 2Moiselles Design
   (les déposer dans /public/assets/fonts/). Tant qu'ils sont absents, le front
   utilise automatiquement les fallbacks Google Fonts ci-dessus — aucun autre
   changement nécessaire (cf. DESIGN §3 & §8).
   ========================================================================== */
/*
@font-face {
    font-family: "Hildor";
    src: url("/assets/fonts/hildor.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Socheerful";
    src: url("/assets/fonts/socheerful.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
*/