/**
 * Variables CSS — Plugin Calendrier de Collectes
 *
 * Convention de nommage : --act-calendrier-collectes-[propriété]
 *
 * Cascade à 3 niveaux (du plus spécifique au plus générique) :
 *   1. Variable du plugin   : --act-calendrier-collectes-*   (override par intégrateur/thème)
 *   2. Variable ACSS        : --action, --base-ultra-dark…   (alignement charte du site)
 *   3. Valeur neutre en dur : issue des maquettes Figma
 *
 * Les variables sont scoped sur le conteneur racine .act-calendrier-collectes
 * pour éviter toute collision globale (pas de :root).
 *
 * Palette mise à jour d'après Figma node 2001-1363 (rev. avril 2026).
 *
 * @see https://docs.automaticcss.com/3.0/fundamentals/variables
 */

.act-calendrier-collectes {

    /* ─── Couleurs principales ──────────────────────────────────────────────── */

    /* Couleur d'accent (liens, boutons actifs, jour courant) */
    --_color-accent: var(
        --act-calendrier-collectes-accent,
        var(--action, #2563eb)
    );

    /* Texte principal (#1e1e1e — Figma Dark/100%) */
    --_color-text: var(
        --act-calendrier-collectes-text,
        var(--base-ultra-dark, #1e1e1e)
    );

    /* Texte secondaire / labels (#6b6b6b) */
    --_color-text-muted: var(
        --act-calendrier-collectes-text-muted,
        var(--base-dark, #6b6b6b)
    );

    /* Fond de surface (panneaux, cartes) */
    --_color-surface: var(
        --act-calendrier-collectes-surface,
        var(--white, #ffffff)
    );

    /* Fond de page / arrière-plan général (#f4f3f0 — Figma beige neutre) */
    --_color-bg: var(
        --act-calendrier-collectes-bg,
        var(--base-ultra-light, #f4f3f0)
    );

    /* Bordures discrètes des cartes (#e3e1dd — Figma) */
    --_color-border: var(
        --act-calendrier-collectes-border,
        var(--base-light, #e3e1dd)
    );

    /* ─── États interactifs ────────────────────────────────────────────────── */

    /* Survol des éléments interactifs */
    --_color-hover: var(
        --act-calendrier-collectes-hover,
        var(--action-dark, #1d4ed8)
    );

    /* Focus visible (accessibilité) */
    --_color-focus: var(
        --act-calendrier-collectes-focus,
        var(--action, #2563eb)
    );

    /* ─── Types de collecte — couleurs Figma ──────────────────────────────── */
    /*
     * Couleurs exactes tirées de la maquette (node 2001-2574).
     * Les couleurs réelles par type sont injectées en inline CSS par PHP
     * via ACT_Collectes_Type_Term_Meta. Ces variables servent de fallback.
     */

    /* Ordures ménagères (Bac gris) */
    --_color-event-ordures: var(
        --act-calendrier-collectes-event-ordures,
        #6c7076
    );

    /* Matière organique (Bac brun) */
    --_color-event-organique: var(
        --act-calendrier-collectes-event-organique,
        #784927
    );

    /* Recyclage (Bac vert) */
    --_color-event-recyclage: var(
        --act-calendrier-collectes-event-recyclage,
        #259057
    );

    /* Encombrants volumineux */
    --_color-event-encombrants: var(
        --act-calendrier-collectes-event-encombrants,
        #c97a17
    );

    /* Arbres de Noël naturels */
    --_color-event-arbres: var(
        --act-calendrier-collectes-event-arbres,
        #bd404a
    );

    /* Matières dangereuses / RDD */
    --_color-event-danger: var(
        --act-calendrier-collectes-event-danger,
        #363742
    );

    /* Collecte générique (fallback pour tout type non mappé) */
    --_color-event-default: var(
        --act-calendrier-collectes-event-default,
        var(--action, #2563eb)
    );

    /* Override local : 1rem=10px (Bricks 62.5%), donc 1.6rem = 16px visuel */
    --act-calendrier-collectes-font-size-base: 1.6rem;

    /* ─── Typographie ──────────────────────────────────────────────────────── */

    --_font-family: var(
        --act-calendrier-collectes-font-family,
        var(--font-body, system-ui, -apple-system, sans-serif)
    );

    --_font-size-base: var(
        --act-calendrier-collectes-font-size-base,
        var(--font-size-m, 1rem)
    );

    --_font-size-small: var(
        --act-calendrier-collectes-font-size-small,
        var(--font-size-s, 0.875rem)
    );

    /* ─── Espacements ──────────────────────────────────────────────────────── */

    --_space-xs: var(
        --act-calendrier-collectes-space-xs,
        var(--space-xs, 0.25rem)
    );

    --_space-s: var(
        --act-calendrier-collectes-space-s,
        var(--space-s, 0.5rem)
    );

    --_space-m: var(
        --act-calendrier-collectes-space-m,
        var(--space-m, 1rem)
    );

    --_space-l: var(
        --act-calendrier-collectes-space-l,
        var(--space-l, 1.5rem)
    );

    --_space-xl: var(
        --act-calendrier-collectes-space-xl,
        var(--space-xl, 2rem)
    );

    /* ─── Formes ───────────────────────────────────────────────────────────── */

    --_radius-s: var(
        --act-calendrier-collectes-radius-s,
        var(--radius-s, 0.25rem)
    );

    --_radius-m: var(
        --act-calendrier-collectes-radius-m,
        var(--radius-m, 8px)
    );

    --_radius-l: var(
        --act-calendrier-collectes-radius-l,
        var(--radius-l, 0.5rem)
    );

    /* ─── Ombres ───────────────────────────────────────────────────────────── */

    /* Ombre discrète des cartes (Figma) */
    --_shadow-card: var(
        --act-calendrier-collectes-shadow-card,
        0px 3px 4px 0px rgba(0, 0, 0, 0.04)
    );

    --_shadow-s: var(
        --act-calendrier-collectes-shadow-s,
        var(--shadow-s, 0 1px 2px 0 rgb(0 0 0 / 0.05))
    );

    --_shadow-m: var(
        --act-calendrier-collectes-shadow-m,
        var(--shadow-m, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1))
    );

    /* ─── Transitions ──────────────────────────────────────────────────────── */

    --_transition-fast: var(
        --act-calendrier-collectes-transition-fast,
        150ms ease
    );

    --_transition-base: var(
        --act-calendrier-collectes-transition-base,
        250ms ease
    );

    /* ─── Layout du plugin ─────────────────────────────────────────────────── */

    /* Padding vertical global du plugin (haut/bas) */
    --_plugin-padding-y: var(
        --act-calendrier-collectes-padding-y,
        80px
    );

    /* Padding horizontal global du plugin (gauche/droite) */
    --_plugin-padding-x: var(
        --act-calendrier-collectes-padding-x,
        80px
    );

    /* ─── Layout 2 colonnes ────────────────────────────────────────────────── */

    /* Fond de la page (beige Figma #f4f3f0) */
    --_page-bg: var(
        --act-calendrier-collectes-page-bg,
        var(--base-ultra-light, #f4f3f0)
    );

    /* Largeur de la sidebar gauche (Figma : 345px) */
    --_sidebar-width: var(
        --act-calendrier-collectes-sidebar-width,
        345px
    );

    /* Gap entre la sidebar et le calendrier (Figma : 24px) */
    --_layout-gap: var(
        --act-calendrier-collectes-layout-gap,
        24px
    );

    /* ─── Onglets / badges neutres ─────────────────────────────────────────── */

    /* Fond de la barre d'onglets et des badges (#f4f3f0 — Figma beige) */
    --_tab-bar-bg: var(
        --act-calendrier-collectes-tab-bar-bg,
        var(--base-ultra-light, #f4f3f0)
    );

    /* ─── Cartes (cards) ───────────────────────────────────────────────────── */

    /* Fond blanc des cartes */
    --_card-bg: var(
        --act-calendrier-collectes-card-bg,
        var(--white, #ffffff)
    );

    /* Bordure des cartes (#e3e1dd — Figma) */
    --_card-border-color: var(
        --act-calendrier-collectes-card-border-color,
        #e3e1dd
    );

    /* Arrondi des cartes (8px — Figma) */
    --_card-radius: var(
        --act-calendrier-collectes-card-radius,
        8px
    );

    /* Padding interne des cartes */
    --_card-padding: var(
        --act-calendrier-collectes-card-padding,
        24px
    );

    /* Gap vertical entre les cartes de la sidebar (Figma : 24px) */
    --_card-gap: var(
        --act-calendrier-collectes-card-gap,
        24px
    );

    /* ─── Boutons d'export ─────────────────────────────────────────────────── */

    /* Fond du bouton primaire — noir Figma */
    --_btn-primary-bg: var(
        --act-calendrier-collectes-btn-primary-bg,
        #000000
    );

    /* Texte des boutons primaires */
    --_btn-primary-text: var(
        --act-calendrier-collectes-btn-primary-text,
        var(--white, #ffffff)
    );

    /* Bordure des boutons secondaires (#c5c5c5 — Figma) */
    --_btn-secondary-border: var(
        --act-calendrier-collectes-btn-secondary-border,
        #c5c5c5
    );

    /* Arrondi des boutons */
    --_btn-primary-radius: var(
        --act-calendrier-collectes-btn-primary-radius,
        8px
    );

    /* Hauteur des boutons d'export (Figma : 48px) */
    --_btn-primary-height: var(
        --act-calendrier-collectes-btn-primary-height,
        48px
    );

    /* ─── Navigation calendrier (prev/next) ────────────────────────────────── */

    /* Bordure des boutons de navigation (#cccccc — Figma N-300, style outline) */
    --_btn-nav-border: var(
        --act-calendrier-collectes-btn-nav-border,
        #cccccc
    );

    /* Taille des boutons ronds de navigation (Figma : 48px) */
    --_btn-nav-size: var(
        --act-calendrier-collectes-btn-nav-size,
        48px
    );

    /* ─── Grille du calendrier ─────────────────────────────────────────────── */

    /* Hauteur fixe des cellules de jour (Figma : ~150px) */
    --_cell-height: var(
        --act-calendrier-collectes-cell-height,
        150px
    );

    /* Couleur de bordure des cellules (#dfdfdf) */
    --_cell-border-color: var(
        --act-calendrier-collectes-cell-border,
        #dfdfdf
    );

    /* Fond des jours hors-mois courant */
    --_cell-other-month-bg: var(
        --act-calendrier-collectes-cell-other-month-bg,
        var(--base-ultra-light, #f4f3f0)
    );

    /* Taille de police des en-têtes de jours (Figma : 16px) */
    --_day-header-font-size: var(
        --act-calendrier-collectes-day-header-font-size,
        16px
    );

    /* ─── Icônes d'événements circulaires ──────────────────────────────────── */

    /* Taille du cercle d'icône (diamètre) */
    --_event-icon-size: var(
        --act-calendrier-collectes-event-icon-size,
        47px
    );

    /* Arrondi du cercle d'icône (99px = cercle parfait) */
    --_event-icon-radius: var(
        --act-calendrier-collectes-event-icon-radius,
        99px
    );

    /* ─── Légende (ex-Chips de filtre) ────────────────────────────────────── */

    /* Taille des pastilles de légende (Figma : 40px) */
    --_legend-pastille-size: var(
        --act-calendrier-collectes-legend-pastille-size,
        40px
    );

    /* Taille de l'icône à l'intérieur des pastilles (Figma : 24px) */
    --_legend-icon-size: var(
        --act-calendrier-collectes-legend-icon-size,
        24px
    );

    /* Gap entre items de légende (Figma : 10px) */
    --_legend-gap: var(
        --act-calendrier-collectes-legend-gap,
        10px
    );

    /* ─── Inputs du sélecteur ──────────────────────────────────────────────── */

    /* Bordure des champs texte / select */
    --_input-border: var(
        --act-calendrier-collectes-input-border,
        var(--base-medium, #a2a2a2)
    );

    /* Arrondi des inputs */
    --_input-radius: var(
        --act-calendrier-collectes-input-radius,
        4px
    );

    /* Couleur du placeholder */
    --_input-placeholder: var(
        --act-calendrier-collectes-input-placeholder,
        var(--base-dark, #696969)
    );
}