/* =============================================================================
   Syndicat Mixte du Beaujolais — Design tokens
   Source : lovable/src/index.css + lovable/tailwind.config.ts
   Aucune valeur récurrente (couleur, font, radius, spacing, shadow, transition)
   ne doit être écrite en dur ailleurs que dans ce fichier.
   ============================================================================= */

:root {
    /* -------------------------------------------------------------------------
       Palette de marque — canaux HSL
       Déclarés en canaux (et non en hex) pour permettre la composition alpha
       telle qu'elle est utilisée dans la maquette : hsl(var(--hsl-ink) / 0.7)
       ------------------------------------------------------------------------- */
    --hsl-white: 0 0% 100%;
    /* #FFFFFF */
    --hsl-cream-light: 18 100% 97%;
    /* #FFF5F0 */
    --hsl-cream: 27 81% 91%;
    /* #FAE8D6 */
    --hsl-ink: 215 100% 6%;
    /* #001020 */
    --hsl-primary: 165 100% 27%;
    /* #008865 */
    --hsl-primary-dark: 165 100% 20%;
    /* #00664D */
    --hsl-accent: 13 100% 66%;
    /* #FF7850 */
    --hsl-accent-dark: 13 80% 56%;
    /* #E95C35 */
    --hsl-text-muted: 215 30% 25%;
    /* #2D3D53 */
    --hsl-border: 27 50% 85%;
    /* #ECD7C6 */
    --hsl-danger: 0 75% 45%;
    /* #C91D1D */

    /* ----------------------------- Couleurs résolues ----------------------- */
    --color-white: hsl(var(--hsl-white));
    --color-cream-light: hsl(var(--hsl-cream-light));
    --color-cream: hsl(var(--hsl-cream));
    --color-ink: hsl(var(--hsl-ink));
    --color-primary: hsl(var(--hsl-primary));
    --color-primary-dark: hsl(var(--hsl-primary-dark));
    --color-accent: hsl(var(--hsl-accent));
    --color-accent-dark: hsl(var(--hsl-accent-dark));
    --color-danger: hsl(var(--hsl-danger));

    /* -------------------------------- Rôles -------------------------------- */
    --color-bg-page: var(--color-cream-light);
    --color-bg-section: var(--color-white);
    --color-bg-alt: var(--color-cream);
    --color-bg-invert: var(--color-ink);
    --color-text: var(--color-ink);
    --color-text-muted: hsl(var(--hsl-text-muted));
    --color-text-invert: var(--color-white);
    --color-border: hsl(var(--hsl-border));
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-primary-dark);
    --color-focus: var(--color-primary);

    /* ------------------------------- Polices -------------------------------
       Déclarations @font-face et imports : fonts/fonts.css
       ------------------------------------------------------------------------- */
    --font-display: "all-round-gothic", "Archivo", system-ui, sans-serif;
    --font-body: "Poppins", system-ui, sans-serif;
    --font-highlight: "Swarsh Daisy", "Caveat", cursive;

    /* Alias historiques du thème KN — consommés par les 21 layouts existants */
    --title-font: var(--font-display);
    --main-font: var(--font-body);

    /* ---------------------------- Graisses --------------------------------- */
    --light: 300;
    --regular: 400;
    --medium: 500;
    --semibold: 600;
    --bold: 700;
    --extrabold: 800;

    /* -------------------------- Échelle typographique ----------------------- */
    --fs-xs: 0.75rem;
    /* 12 */
    --fs-sm: 0.875rem;
    /* 14 */
    --fs-base: 1rem;
    /* 16 */
    --fs-lg: 1.125rem;
    /* 18 */
    --fs-xl: 1.25rem;
    /* 20 */
    --fs-2xl: 1.5rem;
    /* 24 */
    --fs-3xl: 1.875rem;
    /* 30 */
    --fs-4xl: 2.25rem;
    /* 36 */
    --fs-5xl: 3rem;
    /* 48 */
    --fs-6xl: 3.75rem;
    /* 60 */
    --fs-7xl: 4.5rem;
    /* 72 */
    --fs-8xl: 6rem;
    /* 96 */

    --lh-tight: 0.95;
    --lh-heading: 1.05;
    --lh-snug: 1.25;
    --lh-normal: 1.5;
    --lh-relaxed: 1.625;
    --tracking-tight: -0.02em;

    /* ------------------------------- Rayons -------------------------------- */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius: 16px;
    --border-radius-lg: 20px;
    --border-radius-xl: 24px;
    --border-radius-full: 999px;
    --border-radius-cta: var(--border-radius-full);

    /* ------------------------------ Espacements ----------------------------- */
    --space-3xs: 4px;
    --space-2xs: 8px;
    --space-xs: 12px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 40px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 80px;
    --space-5xl: 112px;

    /* ------------------------------- Ombres --------------------------------- */
    --shadow-sm: 0 1px 2px 0 hsl(var(--hsl-ink) / 0.05);
    --shadow-md: 0 4px 6px -1px hsl(var(--hsl-ink) / 0.1), 0 2px 4px -2px hsl(var(--hsl-ink) / 0.1);
    --shadow-lg: 0 10px 15px -3px hsl(var(--hsl-ink) / 0.1), 0 4px 6px -4px hsl(var(--hsl-ink) / 0.1);
    --shadow-xl: 0 20px 25px -5px hsl(var(--hsl-ink) / 0.1), 0 8px 10px -6px hsl(var(--hsl-ink) / 0.1);
    --shadow-2xl: 0 25px 50px -12px hsl(var(--hsl-ink) / 0.25);

    /* ----------------------------- Transitions ------------------------------ */
    --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
    --transition-fast: all 0.2s ease;
    --transition: all 0.3s ease;
    --transition-slow: all 0.8s var(--ease-out-expo);

    /* ------------------------------ Containers ------------------------------
       --container-xxl aligné sur max-w-7xl (1280px) de la maquette.
       .container applique un padding de --gutter-x * 0.5 de chaque côté
       (cf. css/base/container.css) : 40px → 20px, comme px-5 en mobile.
       ------------------------------------------------------------------------- */
    --container-sm: 540px;
    --container-md: 720px;
    --container-lg: 960px;
    --container-xl: 1280px;
    --container-xxl: 1280px;
    --gutter-x: 40px;
    --gutter-y: 0;

    /* -------------------------------- Layout -------------------------------- */
    --header-height: 80px;
    /* header sticky h-20 de la maquette */
    --hero-inset: 20px;
    /* marge latérale + basse du hero arrondi */

    /* -------------------------------------------------------------------------
       ALIAS HÉRITÉS DU THÈME KN
       Les 21 layouts existants consomment encore ces noms. Ils sont remappés
       sur la charte SMB pour que rien ne casse pendant la migration, et doivent
       être supprimés au fur et à mesure que chaque section est reprise.
       NE PAS EN AJOUTER DE NOUVEAUX : utiliser les tokens sémantiques ci-dessus.
       ------------------------------------------------------------------------- */
    --white: var(--color-white);
    --dark: var(--color-ink);
    --grey: var(--color-bg-page);
    --dark-grey: var(--color-text-muted);
    --blue: var(--color-primary);
    --light-blue: var(--color-primary);
    --dark-blue: var(--color-primary-dark);
    --purple: var(--color-accent);
    --light-purple: var(--color-accent);
    --gold: var(--color-accent);
    --purple-opacity-33: hsl(var(--hsl-accent) / 0.33);
    --gradient-purple: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
    --gradient-blue: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

/* Gouttières de container alignées sur la maquette : px-5 / sm:px-8 / lg:px-12.
   .container applique --gutter-x * 0.5 de chaque côté. */
@media (min-width: 640px) {
    :root {
        --gutter-x: 64px;
    }
}

@media (min-width: 1024px) {
    :root {
        --gutter-x: 96px;
    }
}