/*
 * Design tokens — TEA Logistic Group.
 * Source unique des couleurs, typographies, espacements et ombres du site public.
 * Toute nouvelle règle CSS doit consommer ces variables plutôt que des valeurs en dur.
 */
:root {
    /* Couleur de marque dominante — le jaune fourni, utilisé partout
       (boutons, bandeaux, états actifs, accents de cartes). */
    --color-gold-100: #fbf1da;
    --color-gold-300: #f0d585;
    --color-gold-500: #e7b93e;
    --color-gold-600: #c79a2a;
    --color-gold-700: #8a6c1e;

    /* "Navy" — conservé comme nom de variable pour ne pas retoucher tout le
       CSS, mais repointé vers un noir/anthracite chaud neutre : sert aux
       quelques zones sombres (footer, topbar) et au texte, sans teinte
       bleue. Bleu quasi absent du site, comme demandé. */
    --color-navy-900: #1c1a15;
    --color-navy-800: #262319;
    --color-navy-700: #34301f;
    --color-navy-600: #4a4530;
    --color-navy-500: #625c3f;

    --color-safety-500: #d9662b;
    --color-safety-600: #b84f1d;

    --color-success-100: #edfaf5;
    --color-success-500: #1a7a4a;
    --color-danger-100: #fef2f2;
    --color-danger-500: #b91c1c;

    /* Neutres — gris chauds, sans dominante bleue */
    --color-white: #ffffff;
    --color-gray-50: #f8f7f4;
    --color-gray-100: #efeee8;
    --color-gray-200: #e1ded4;
    --color-gray-300: #c9c4b5;
    --color-gray-400: #9a9484;
    --color-gray-600: #5b5647;
    --color-gray-800: #29271e;
    --color-gray-900: #17150f;

    /* Rôles sémantiques */
    --color-text: var(--color-gray-900);
    --color-text-muted: var(--color-gray-600);
    --color-text-on-dark: #f4f2ec;
    --color-text-on-dark-muted: #b8b2a0;
    --color-surface: var(--color-white);
    --color-surface-alt: var(--color-gray-50);
    --color-surface-dark: var(--color-navy-900);
    --color-border: var(--color-gray-200);
    --color-accent: var(--color-gold-500);
    --color-accent-strong: var(--color-gold-600);
    --color-link: var(--color-navy-700);

    /* Typographie — police système pour le corps (rapide, sobre, aucune
       dépendance externe) et une grotesque condensée pour les titres,
       moins vue partout que Montserrat/Poppins/Inter. */
    --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --font-heading: "Barlow Semi Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --fs-xs: 0.8125rem;
    --fs-sm: 0.9375rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.375rem;
    --fs-xl: 1.75rem;
    --fs-2xl: 2.25rem;
    --fs-3xl: 3rem;
    --lh-tight: 1.2;
    --lh-normal: 1.6;

    /* Espacements */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    /* Rayons / ombres — angles resserrés et ombres discrètes : registre
       plus classique/institutionnel que les grandes cartes flottantes. */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 3px rgba(11, 27, 43, 0.08);
    --shadow-md: 0 4px 16px rgba(11, 27, 43, 0.08);
    --shadow-lg: 0 12px 32px rgba(11, 27, 43, 0.14);

    /* Mise en page */
    --container-width: 1240px;
    --header-height: 84px;
    --header-height-scrolled: 68px;

    /* Transitions */
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-fast: 180ms var(--ease);
    --transition-normal: 280ms var(--ease);
}