/* ════════════════════════════════════════════════════════════════════════
   VARIABLES — Front Office TCA Industries
   ─────────────────────────────────────────────────────────────────────
   Charte graphique officielle Luciole Studio 2024.
   4 couleurs de marque : Anthracite, Bleu Pétrole, Doré, Blanc.
   2 polices : Urbanist (body) + Kaelia (titres).
   Surcharge des tokens globaux définis dans variables.css.
════════════════════════════════════════════════════════════════════════ */

:root {

    /* ── Couleurs de marque officielles ──────────────────────────────── */
    /* Décision client juin 2026 : le bleu pétrole devient la couleur PRIMAIRE
       (était anthracite), le doré la SECONDAIRE. Quasi-zéro noir/anthracite.
       Les variables --tca-anthracite sont gardées pour compatibilité mais
       pointent désormais sur petrol pour propager la nouvelle identité sur
       tous les composants existants sans toucher 50 lignes de CSS. */
    --tca-primary:          #0D4156;   /* bleu pétrole — couleur principale */
    --tca-secondary:        #D8AB65;   /* doré — couleur secondaire */
    --tca-anthracite:       #0D4156;   /* alias de --tca-primary (rétrocompat) */
    --tca-petrol:           #0D4156;
    --tca-gold:             #D8AB65;
    --tca-white:            #FFFFFF;

    /* ── Variations utilitaires (dérivées, ne pas inventer d'autres) ── */
    --tca-petrol-light:     #1A5972;
    --tca-petrol-dark:      #062F3F;
    --tca-gold-light:       #E4BD83;
    --tca-gold-dark:        #BE9550;
    --tca-anthracite-light: #1A5972;   /* alias petrol-light (rétrocompat) */

    /* ── Gris fonctionnels (UI uniquement, hors charte) ──────────────── */
    --tca-gray-50:          #F8F8F8;
    --tca-gray-100:         #EEEEEE;
    --tca-gray-200:         #DDDDDD;
    --tca-gray-300:         #C5C5C5;
    --tca-gray-400:         #999999;
    --tca-gray-500:         #777777;
    --tca-gray-600:         #555555;
    --tca-gray-700:         #3A3B3B;

    /* ── État erreur (formulaires, validation) ──────────────────────── */
    --tca-error:            #DC2626;
    --tca-error-bg:         #FEF2F2;
    --tca-success:          #16A34A;
    --tca-success-bg:       #F0FDF4;

    /* ── Typographies ────────────────────────────────────────────────── */
    --tca-font-body:        'Urbanist', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --tca-font-heading:     'Kaelia', 'Urbanist', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

    /* ── Tailles de police (mobile-first, ajustées en media query) ──── */
    --tca-fs-h1:            2rem;        /* 32px mobile */
    --tca-fs-h2:            1.6rem;      /* 26px mobile */
    --tca-fs-h3:            1.25rem;     /* 20px mobile */
    --tca-fs-h4:            1.125rem;    /* 18px mobile */
    --tca-fs-body:          1rem;        /* 16px */
    --tca-fs-small:         0.875rem;    /* 14px */
    --tca-fs-eyebrow:       0.75rem;     /* 12px uppercase */

    /* ── Espacements (rythme vertical 8px) ──────────────────────────── */
    --tca-space-1:          0.25rem;     /*  4px */
    --tca-space-2:          0.5rem;      /*  8px */
    --tca-space-3:          0.75rem;     /* 12px */
    --tca-space-4:          1rem;        /* 16px */
    --tca-space-5:          1.5rem;      /* 24px */
    --tca-space-6:          2rem;        /* 32px */
    --tca-space-7:          3rem;        /* 48px */
    --tca-space-8:          5rem;        /* 80px */
    --tca-space-9:          7.5rem;      /* 120px */

    /* ── Conteneur ────────────────────────────────────────────────────── */
    --tca-container-max:    1500px;          /* +300 vs 1200 : moins de marges sur écrans larges */
    --tca-container-pad-mobile:  1.25rem;    /* 20px */
    --tca-container-pad-tablet:  2rem;       /* 32px */
    --tca-container-pad-desktop: 3rem;       /* 48px (au lieu de 80px) */

    /* ── Border-radius — style carré / industriel ─────────────────────── */
    /* Petits/moyens unifiés à 6px (industriel, sobre).
       XL réservé aux gros wrappers (sections gris, testimonials) → 18px
       pour donner de la douceur aux grandes formes. */
    --tca-radius-sm:        3px;
    --tca-radius:           6px;
    --tca-radius-md:        6px;
    --tca-radius-lg:        6px;
    --tca-radius-xl:        18px;
    --tca-radius-pill:      999px;

    /* ── Bordures ─────────────────────────────────────────────────────── */
    --tca-border:           1px solid var(--tca-gray-100);
    --tca-border-strong:    1px solid var(--tca-gray-200);

    /* ── Shadows discrètes ───────────────────────────────────────────── */
    --tca-shadow-sm:        0 1px 3px rgba(13, 65, 86, 0.06);
    --tca-shadow:           0 2px 8px rgba(13, 65, 86, 0.08);
    --tca-shadow-md:        0 4px 16px rgba(13, 65, 86, 0.10);
    --tca-shadow-lg:        0 8px 32px rgba(13, 65, 86, 0.12);

    /* ── Transitions ──────────────────────────────────────────────────── */
    --tca-transition:       all 0.2s ease;
    --tca-transition-slow:  all 0.3s ease;

    /* ── Z-index scale ────────────────────────────────────────────────── */
    --tca-z-nav:            100;
    --tca-z-dropdown:       200;
    --tca-z-modal:          1000;
    --tca-z-toast:          2000;

    /* ── Surcharge des tokens globaux (compatibilité moule existant) ── */
    --accent:               var(--tca-petrol);
    --accent2:              var(--tca-petrol-light);
    --green:                var(--tca-success);
    --red:                  var(--tca-error);
    --orange:               var(--tca-gold);
    --pink:                 var(--tca-gold-light);
    --text:                 var(--tca-anthracite);
    --muted:                var(--tca-gray-500);
    --bg:                   var(--tca-white);
    --glass-bg:             rgba(255, 255, 255, 0.85);
    --glass-border:         var(--tca-gray-100);
    --glass-shadow:         var(--tca-shadow);
    --gradient-accent:      linear-gradient(135deg, var(--tca-petrol), var(--tca-petrol-light));
    --gradient-green:       linear-gradient(135deg, var(--tca-success), var(--tca-petrol));
    --gradient-red:         linear-gradient(135deg, var(--tca-error), var(--tca-gold));
    --required:             var(--tca-error);
}

/* ── Tailles desktop ─────────────────────────────────────────────────── */
@media (min-width: 1024px) {
    :root {
        --tca-fs-h1:        3rem;        /* 48px desktop */
        --tca-fs-h2:        2rem;        /* 32px desktop */
        --tca-fs-h3:        1.5rem;      /* 24px desktop */
        --tca-fs-h4:        1.25rem;     /* 20px desktop */
        --tca-fs-eyebrow:   0.875rem;    /* 14px uppercase */
    }
}