/* ============================================================
   DESIGN TOKENS – francenews
   css/base/tokens.css

   PHILOSOPHIE :
   Approche token-first inspirée ACSS / Style Dictionary.
   - Toutes les valeurs passent par des variables CSS (:root)
   - Les composants NE contiennent PAS de valeurs brutes
   - Breakpoints identiques à francenews.breakpoints.yml

   NOMMAGE : --{catégorie}-{sous-catégorie}-{variante}
   ============================================================ */

:root {

  /* ──────────────────────────────────────────────────────────
     PALETTE BRUTE (primitive tokens)
     Jamais utilisés directement dans les composants.
     Servent uniquement à alimenter les semantic tokens.
  ────────────────────────────────────────────────────────── */

  /* Bleus institutionnels – dérivés de #14246e */
  --palette-blue-900: #080d2a;
  --palette-blue-800: #0e1a4f;
  --palette-blue-700: #14246e;  /* Couleur principale */
  --palette-blue-600: #1b2f91;
  --palette-blue-500: #2d4bb5;
  --palette-blue-100: #e4e8f5;
  --palette-blue-50:  #f0f2fb;

  /* Rouge / Accent */
  --palette-red-700: #c31802;   /* Rouge foncé – overlay hover */
  --palette-red-500: #e63e29;   /* Rouge principal – liens, tags, hover */
  --palette-red-100: #fde8e5;

  /* Neutres – palette réelle francenews */
  --palette-gray-950: #1d1d1c;  /* Quasi noir – ombre navbar */
  --palette-gray-900: #2d2d2d;  /* Texte corps */
  --palette-gray-800: #363b40;  /* Fond footer */
  --palette-gray-700: #43484d;  /* Titres articles liste */
  --palette-gray-600: #505458;  /* Liens navigation */
  --palette-gray-500: #666666;  /* Titres région footer */
  --palette-gray-400: #777777;  /* Dates liste articles */
  --palette-gray-350: #999999;  /* Texte footer */
  --palette-gray-300: #9fa1a3;  /* Dates highlight */
  --palette-gray-200: #cccccc;  /* Bordures dropdown, pager */
  --palette-gray-150: #d9d9d9;  /* Bordure download wrapper */
  --palette-gray-100: #dddddd;  /* Bordures tableaux */
  --palette-gray-75:  #e6e5e5;  /* Fond filtres liste */
  --palette-gray-50:  #f0f0f0;  /* Fond clair – formulaires, user-tools */
  --palette-white:    #ffffff;

  /* Sémantiques UI */
  --palette-success: #2E7D52;
  --palette-warning: #B45309;
  --palette-error:   #C0392B;
  --palette-info:    #1B5E8A;


  /* ──────────────────────────────────────────────────────────
     SEMANTIC TOKENS – Couleurs
     Ces tokens sont utilisés dans les composants.
  ────────────────────────────────────────────────────────── */

  /* Marque */
  --clr-primary:          var(--palette-blue-700);
  --clr-primary-dark:     var(--palette-blue-800);
  --clr-primary-darker:   var(--palette-blue-900);
  --clr-primary-light:    var(--palette-blue-600);
  --clr-primary-subtle:   var(--palette-blue-50);
  --clr-accent:           var(--palette-red-500);
  --clr-accent-hover:     var(--palette-red-700);
  --clr-accent-subtle:    var(--palette-red-100);
  --clr-white:            var(--palette-white);
  --clr-default:          var(--palette-gray-900);

  --clr-primary-80: color-mix(in srgb, #14246e 80%, transparent);
  --clr-primary-30: color-mix(in srgb, #14246e 30%, transparent);
  --clr-primary-20: color-mix(in srgb, #14246e 20%, transparent);
  --clr-primary-10: color-mix(in srgb, #14246e 10%, transparent);
  --clr-primary-05: color-mix(in srgb, #14246e 05%, transparent);

  --clr-accent-80: color-mix(in srgb, #e63e29 80%, transparent);

  /* Texte */
  --clr-text-default:     var(--palette-gray-900);
  --clr-text-muted:       var(--palette-gray-500);
  --clr-text-subtle:      var(--palette-gray-400);
  --clr-text-inverse:     var(--palette-white);
  --clr-text-on-primary:  var(--palette-white);
  --clr-text-on-accent:   var(--palette-white);
  --clr-text-link:        var(--clr-accent);
  --clr-text-link-hover:  var(--clr-accent-hover);

  /* Surfaces */
  --clr-bg-body:          var(--palette-white);
  --clr-bg-subtle:        var(--palette-gray-50);
  --clr-bg-muted:         var(--palette-gray-75);
  --clr-bg-inverse:       var(--clr-primary-darker);
  --clr-bg-overlay:       rgba(8, 13, 42, 0.78);
  --clr-bg-white:         var(--palette-white);

  /* Bordures */
  --clr-border-default:   var(--palette-gray-200);
  --clr-border-muted:     var(--palette-gray-100);
  --clr-border-strong:    var(--palette-gray-200);
  --clr-border-primary:   var(--clr-primary);
  --clr-border-inverse:   rgba(255,255,255,0.15);
  --clr-border-white:     var(--palette-white);

  /* États */
  --clr-success:          var(--palette-success);
  --clr-warning:          var(--palette-warning);
  --clr-error:            var(--palette-error);
  --clr-info:             var(--palette-info);


  /* ──────────────────────────────────────────────────────────
     TYPOGRAPHIE
  ────────────────────────────────────────────────────────── */

  /* Familles */
  --font-display:   'Montserrat', Helvetica, Arial, sans-serif;
  --font-body:      'Montserrat', Helvetica, Arial, sans-serif;
  --font-mono:      'Courier New', monospace;

  /* Tailles – fluid avec clamp() */
  /* Formule : clamp(min, preferred_vw, max) */
  --fs-2xs:   clamp(0.625rem, 0.9vw,  0.75rem);   /*  10–12px */
  --fs-xs:    clamp(0.75rem,  1vw,    0.875rem);   /*  12–14px */
  --fs-sm:    clamp(0.875rem, 1.1vw,  0.9375rem);  /*  14–15px */
  --fs-base:  clamp(1rem,     1.2vw,  1.0625rem);  /*  16–17px */
  --fs-md:    clamp(1.0625rem,1.3vw,  1.125rem);   /*  17–18px */
  --fs-lg:    clamp(1.125rem, 1.5vw,  1.25rem);    /*  18–20px */
  --fs-xl:    clamp(1.25rem,  1.8vw,  1.5rem);     /*  20–24px */
  --fs-2xl:   clamp(1.5rem,   2.2vw,  1.875rem);   /*  24–30px */
  --fs-3xl:   clamp(1.75rem,  2.8vw,  2.25rem);    /*  28–36px */
  --fs-4xl:   clamp(2rem,     3.5vw,  2.75rem);    /*  32–44px */
  --fs-5xl:   clamp(2.5rem,   4.5vw,  3.5rem);     /*  40–56px */

  /* Poids */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-xlbold:   800;
  --fw-xxlbold:  900;

  /* Hauteurs de ligne */
  --lh-tight:    1.15;
  --lh-heading:  1.25;
  --lh-snug:     1.4;
  --lh-body:     1.65;
  --lh-loose:    1.9;

  /* Espacement des lettres */
  --ls-tight:    -0.02em;
  --ls-heading:  -0.01em;
  --ls-normal:    0;
  --ls-wide:      0.04em;
  --ls-wider:     0.08em;
  --ls-caps:      0.1em;


  /* ──────────────────────────────────────────────────────────
     ESPACEMENTS
     Échelle 4px base (multiple de 4 jusqu'à 8px, puis ×1.5)
  ────────────────────────────────────────────────────────── */

  --space-1:   0.25rem;   /*  4px */
  --space-1-25: 0.3125rem;  /* 5px – usage spécifique */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-9:   2.25rem;   /* 36px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */
  --space-36:  9rem;      /* 144px */
  --space-40:  10rem;     /* 160px */
  --space-44:  11rem;     /* 176px */
  --space-48:  12rem;     /* 192px */
  --space-50:  12.5rem;   /* 200px */
  --space-52:  13rem;     /* 208px */
  --space-54:  13.5rem;   /* 216px */
  --space-56:  14rem;     /* 224px */
  --space-58:  14.5rem;   /* 232px */
  --space-60:  15rem;     /* 240px */
  --space-62:  15.5rem;   /* 248px */
  --space-64:  16rem;     /* 256px */

  /* Aliases sémantiques */
  --space-xs:  var(--space-2);
  --space-sm:  var(--space-4);
  --space-md:  var(--space-6);
  --space-lg:  var(--space-12);
  --space-xl:  var(--space-20);
  --space-2xl: var(--space-32);

  /* Sections */
  --section-padding-y: clamp(var(--space-12), 6vw, var(--space-24));
  --section-padding-x: clamp(var(--space-4),  4vw, var(--space-8));


  /* ──────────────────────────────────────────────────────────
     LAYOUT / GRILLE
  ────────────────────────────────────────────────────────── */

  --container-max:      1280px;
  --container-wide:     1440px;
  --container-narrow:   768px;
  --container-padding:  clamp(1rem, 4vw, 2rem);

  --grid-columns:       12;
  --grid-gap:           clamp(1rem, 2vw, 1.5rem);


  /* ──────────────────────────────────────────────────────────
     BREAKPOINTS (référence uniquement – identiques à .yml)
     Utiliser dans JS via getComputedStyle / CSS via media queries
  ────────────────────────────────────────────────────────── */

  --bp-mobile:   0px;
  --bp-tablet:   768px;
  --bp-desktop:  1280px;
  --bp-wide:     1920px;


  /* ──────────────────────────────────────────────────────────
     BORDURES & RAYONS
  ────────────────────────────────────────────────────────── */

  --border-width-1:  1px;
  --border-width-2:  2px;
  --border-width-4:  4px;

  --radius-sm:    2px;
  --radius-md:    4px;
  --radius-lg:    8px;
  --radius-xl:    16px;
  --radius-2xl:   24px;
  --radius-full:  9999px;

  /* Alias composants */
  --radius-card:   var(--radius-md);
  --radius-btn:    var(--radius-md);
  --radius-badge:  var(--radius-full);
  --radius-input:  var(--radius-md);


  /* ──────────────────────────────────────────────────────────
     OMBRES
  ────────────────────────────────────────────────────────── */

  --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.12);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.16);
  --shadow-2xl: 0 24px 64px rgba(0,0,0,0.20);

  /* Ombres colorées */
  --shadow-primary: 0 8px 24px rgba(20, 36, 110, 0.25);
  --shadow-accent:  0 6px 20px rgba(230, 62, 41, 0.35);
  --shadow-card:    0 8px 48px rgba(0,0,0,0.10);


  /* ──────────────────────────────────────────────────────────
     TRANSITIONS & ANIMATIONS
  ────────────────────────────────────────────────────────── */

  --ease-linear:    linear;
  --ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-med:    400ms;
  --duration-slow:   600ms;
  --duration-slower: 900ms;

  /* Transition standard pour hover */
  --transition-base: var(--duration-med) var(--ease-in);


  /* ──────────────────────────────────────────────────────────
     Z-INDEX
     Nommés pour éviter les guerres de z-index
  ────────────────────────────────────────────────────────── */

  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;


  /* ──────────────────────────────────────────────────────────
     COMPOSANTS SPÉCIFIQUES
     Tokens de haut niveau qui consomment les tokens de base.
  ────────────────────────────────────────────────────────── */

  /* Hero */
  --hero-min-height:     clamp(480px, 72vh, 860px);
  --hero-content-width:  min(1150px, 90%);
  --hero-overlay-bg:     var(--clr-primary-80);
  --hero-overlay-border: rgba(255,255,255,0.12);

  /* Cards */
  --card-padding:        var(--space-6);
  --card-radius:         var(--radius-card);
  --card-shadow:         var(--shadow-card);
  --card-bg:             var(--clr-bg-body);
  --card-border:         var(--clr-border-muted);

  /* Navigation */
  --nav-height:          72px;
  --nav-bg:              var(--palette-blue-700);
  --nav-text:            var(--clr-text-inverse);
  --nav-link-hover:      var(--clr-accent);

  /* Boutons */
  --btn-padding-y:       0.75rem;
  --btn-padding-x:       1.75rem;
  --btn-font-size:       var(--fs-sm);
  --btn-font-weight:     var(--fw-medium);
  --btn-letter-spacing:  var(--ls-wide);
  --btn-radius:          var(--radius-btn);
  --btn-transition:      transform var(--duration-fast) var(--ease-out-expo),
                         box-shadow var(--duration-base) var(--ease-out);

  /* Formulaires */
  --input-padding-y:     0.625rem;
  --input-padding-x:     1rem;
  --input-font-size:     var(--fs-base);
  --input-border:        var(--clr-border-strong);
  --input-border-focus:  var(--clr-primary-light);
  --input-radius:        var(--radius-input);
  --input-bg:            var(--clr-bg-body);
  --input-shadow-focus:  0 0 0 3px rgba(27, 47, 145, 0.20);

}