/**
 * AEKE — Design Tokens
 * Source unique de vérité pour le design system (couleurs, typographie,
 * rayons, ombres, espacements). Réutilisé par tout le CSS custom des sections.
 *
 * NB : ce fichier ne définit que des variables sur :root. Il ne modifie
 * aucun layout global (rows, containers, colonnes, body).
 */

:root {
    /* ---------------------------------------------------------------
     * Couleurs de marque
     * ------------------------------------------------------------- */
    --aeke-green: #2FC080;          /* Accent principal : CTA, liens, états actifs */
    --aeke-green-hover: #27A96E;    /* Hover / actif foncé */
    --aeke-green-soft: #E9F9F1;     /* Fond vert très clair (badges, surbrillances) */
    --aeke-teal: #00A5B5;           /* Data-viz / tableau comparatif uniquement */

    /* ---------------------------------------------------------------
     * Neutres
     * ------------------------------------------------------------- */
    --aeke-black: #1A1A1A;          /* Titres, valeurs */
    --aeke-dark: #111111;           /* Sections sombres, footer, hero */
    --aeke-text: #707070;           /* Corps de texte */
    --aeke-muted: #A0A0A0;          /* Texte secondaire, placeholders */
    --aeke-border: #E0E0E0;         /* Bordures, séparateurs */
    --aeke-border-strong: #D0D0D0;  /* Bordures marquées */
    --aeke-bg: #F5F5F5;             /* Fond de section clair */
    --aeke-white: #FFFFFF;

    /* ---------------------------------------------------------------
     * Typographie (les familles sont réglées globalement dans Woodmart ;
     * on les rappelle ici pour les composants custom)
     * ------------------------------------------------------------- */
    --aeke-font-heading: "Poppins", sans-serif;
    --aeke-font-body: "Inter", sans-serif;

    --aeke-fs-h1: 3.5rem;    /* ~56px */
    --aeke-fs-h2: 2.5rem;    /* ~40px */
    --aeke-fs-h3: 1.5rem;    /* ~24px */
    --aeke-fs-h4: 1.25rem;   /* ~20px */
    --aeke-fs-body: 1rem;    /* ~16px */
    --aeke-fs-small: 0.8125rem; /* ~13px */

    --aeke-fw-regular: 400;
    --aeke-fw-medium: 500;
    --aeke-fw-semibold: 600;
    --aeke-fw-bold: 700;

    --aeke-lh-tight: 1.15;
    --aeke-lh-normal: 1.6;

    /* ---------------------------------------------------------------
     * Rayons
     * ------------------------------------------------------------- */
    --aeke-radius-btn: 8px;
    --aeke-radius-card: 20px;
    --aeke-radius-img: 16px;
    --aeke-radius-pill: 999px;

    /* ---------------------------------------------------------------
     * Largeur de contenu
     * Utilisée pour recadrer le contenu quand le parent est déjà
     * étiré pleine largeur (ex. description produit rendue dans un
     * élément "Product content" en Stretch row and content).
     * ------------------------------------------------------------- */
    --aeke-content-max: 1222px;
    --aeke-content-gutter: 15px;

    /* ---------------------------------------------------------------
     * Ombres (douces et diffuses uniquement)
     * ------------------------------------------------------------- */
    --aeke-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.04);
    --aeke-shadow-md: 0 10px 40px rgba(0, 0, 0, 0.06);
    --aeke-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.08);

    /* ---------------------------------------------------------------
     * Espacements (base 8px)
     * ------------------------------------------------------------- */
    --aeke-space-1: 8px;
    --aeke-space-2: 16px;
    --aeke-space-3: 24px;
    --aeke-space-4: 32px;
    --aeke-space-5: 48px;
    --aeke-space-6: 64px;
    --aeke-space-section: 120px;   /* Padding vertical de section (desktop) */

    /* ---------------------------------------------------------------
     * Transitions
     * ------------------------------------------------------------- */
    --aeke-transition: 0.3s ease;
}