/* ═══════════════════════════════════════════════════════════════
   TOKENS.CSS — Variables fondamentales du template atlinker v1
   ═══════════════════════════════════════════════════════════════

   Ce fichier est IDENTIQUE pour TOUS les partenaires.
   Seules les couleurs primaires (lignes 10-12) sont overridées
   par le fichier palette-{metier}.css chargé APRÈS tokens.css.

   Référence visuelle : https://www.elagueurs-toulousains.fr/
   Audit complet : DESIGN_REFERENCE.md à la racine du projet
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ════════════════════════════════════════
     COULEURS PRIMAIRES (overridées par métier)
     Défaut : palette élagueur (référence)
     ════════════════════════════════════════ */
  --color-primary:       #2BA31A;  /* CTAs, boutons principaux */
  --color-primary-dark:  #055511;  /* H1, H2, titres */
  --color-primary-light: #D1FFC9;  /* Accents, badges, backgrounds doux */

  /* ════════════════════════════════════════
     COULEURS NEUTRES (identiques tous métiers)
     ════════════════════════════════════════ */
  --color-text-heading:  var(--color-primary-dark);
  --color-text-body:     #545454;
  --color-text-muted:    #9A9A9A;
  --color-text-inverse:  #FFFFFF;

  --color-bg-primary:    #FFFFFF;
  --color-bg-secondary:  #F5F5F5;
  --color-bg-accent:     var(--color-primary-light);

  --color-border:        #E8E8E8;
  --color-border-focus:  var(--color-primary);

  --color-rating-gold:   #FFD700;
  --color-success:       #16A34A;
  --color-warning:       #F59E0B;
  --color-danger:        #DC2626;

  /* ════════════════════════════════════════
     TYPOGRAPHIE
     ════════════════════════════════════════ */
  --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Tailles (desktop) — overridées en mobile plus bas */
  --font-size-h1:    55px;
  --font-size-h2:    40px;
  --font-size-h3:    24px;
  --font-size-h4:    18px;
  --font-size-body:  16px;
  --font-size-small: 14px;
  --font-size-xs:    12px;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight: 1.1;
  --line-height-body:  1.4;
  --line-height-loose: 1.6;

  /* ════════════════════════════════════════
     SPACING (scale 8px)
     ════════════════════════════════════════ */
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* ════════════════════════════════════════
     RADIUS
     ════════════════════════════════════════ */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   15px;    /* cards */
  --radius-xl:   20px;
  --radius-full: 24px;    /* boutons (pill) */
  --radius-round: 50%;    /* avatars, cercles */

  /* ════════════════════════════════════════
     SHADOWS
     ════════════════════════════════════════ */
  --shadow-sm: 0px 0px 8px  rgba(0, 0, 0, 0.05);
  --shadow-md: 0px 0px 14px rgba(4, 10, 30, 0.10);
  --shadow-lg: 0px 4px 20px rgba(4, 10, 30, 0.15);
  --shadow-xl: 0px 8px 32px rgba(0, 0, 0, 0.20);

  /* ════════════════════════════════════════
     TRANSITIONS
     ════════════════════════════════════════ */
  --transition-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ════════════════════════════════════════
     LAYOUT
     ════════════════════════════════════════ */
  --max-width-primary: 1280px;
  --max-width-content: 960px;   /* articles, pages de texte */
  --max-width-narrow:  720px;   /* blog posts, pages légales */
  --container-padding: clamp(16px, 4vw, 32px);

  --header-height:     80px;
  --header-height-mobile: 64px;

  --breakpoint-mobile:  480px;
  --breakpoint-tablet:  768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide:    1280px;

  /* ════════════════════════════════════════
     Z-INDEX
     ════════════════════════════════════════ */
  --z-base:      1;
  --z-dropdown:  10;
  --z-sticky:    100;
  --z-overlay:   500;
  --z-modal:     1000;
  --z-tooltip:   2000;
}

/* ═══════════════════════════════════════════════════════════════
   Responsive font sizing — mobile d'abord
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root {
    --font-size-h1:    36px;
    --font-size-h2:    28px;
    --font-size-h3:    20px;
    --font-size-h4:    16px;
  }
}

@media (max-width: 480px) {
  :root {
    --font-size-h1:    32px;
    --font-size-h2:    24px;
  }
}