/*
 * Design Tokens — généré à partir de l'export Figma (Global Tokens + Component Tokens).
 * Structure fidèle à Figma : Global (valeurs brutes) → Component (usage sémantique).
 * Les composants du thème (boutons, cards, textes...) doivent TOUJOURS utiliser
 * les variables --c-* (component), jamais --g-* (global) directement.
 */

:root{

  /* ===================== GLOBAL TOKENS ===================== */

  /* --- Spacing --- */
  --g-spacing-0:2px;
  --g-spacing-1:4px;
  --g-spacing-2:8px;
  --g-spacing-3:12px;
  --g-spacing-4:16px;
  --g-spacing-5:20px;
  --g-spacing-6:24px;
  --g-spacing-7:32px;
  --g-spacing-8:40px;
  --g-spacing-9:48px;
  --g-spacing-10:56px;

  /* --- Stroke --- */
  --g-stroke-0:1px;
  --g-stroke-1:2px;
  --g-stroke-2:4px;
  --g-stroke-3:6px;

  /* --- Radius --- */
  --g-radius-none:0px;
  --g-radius-1:2px;
  --g-radius-2:4px;
  --g-radius-3:6px;
  --g-radius-4:8px;
  --g-radius-5:10px;
  --g-radius-6:12px;
  --g-radius-7:16px;
  --g-radius-full:999px;

  /* --- Couleurs : Primary --- */
  --g-primary-100:#bdd4fc;
  --g-primary-200:#7aaaf8;
  --g-primary-300:#387ff5;
  --g-primary-400:#0b5add;
  --g-primary-500:#083f9b;
  --g-primary-alpha-10:rgba(56,127,245,.10);

  /* --- Couleurs : Secondary --- */
  --g-secondary-100:#c4aaff;
  --g-secondary-200:#8855ff;
  --g-secondary-300:#4d00ff;
  --g-secondary-400:#3c00c6;
  --g-secondary-500:#2a008c;
  --g-secondary-alpha-10:rgba(77,0,255,.10);

  /* --- Couleurs : Neutral --- */
  --g-neutral-100:#ffffff;
  --g-neutral-200:#e8e8e8;
  --g-neutral-300:#d2d2d2;
  --g-neutral-400:#bbbbbb;
  --g-neutral-500:#a4a4a4;
  --g-neutral-600:#8e8e8e;
  --g-neutral-700:#777777;
  --g-neutral-800:#606060;
  --g-neutral-900:#4a4a4a;
  --g-neutral-1000:#333333;
  --g-neutral-alpha-10:rgba(51,51,51,.10);

  /* --- Couleurs : statuts --- */
  --g-red-100:#fb3748;
  --g-red-200:#d00416;
  --g-red-alpha-10:rgba(251,55,72,.10);

  --g-yellow-100:#ffdb43;
  --g-yellow-200:#dfb400;
  --g-yellow-alpha-10:rgba(255,219,67,.10);

  --g-green-100:#84ebb4;
  --g-green-200:#1fc16b;
  --g-green-alpha-10:rgba(31,193,107,.10);


  /* ===================== COMPONENT TOKENS ===================== */
  /* (usage sémantique — c'est CE NIVEAU que les gabarits/CSS du thème consomment) */

  /* Spacing sémantique */
  --c-gap-2xs:var(--g-spacing-1);
  --c-gap-xs:var(--g-spacing-2);
  --c-gap-s:var(--g-spacing-3);

  --c-padding-2xs:var(--g-spacing-0);
  --c-padding-s:var(--g-spacing-2);
  --c-padding-m:var(--g-spacing-3);
  --c-padding-l:var(--g-spacing-4);
  --c-padding-2xl:var(--g-spacing-6);
  --c-padding-3xl:var(--g-spacing-7);

  /* Radius sémantique */
  --c-radius-m:var(--g-radius-2);
  --c-radius-xl:var(--g-radius-6);
  --c-radius-2xl:var(--g-radius-7);
  --c-radius-round:var(--g-radius-full);

  /* Stroke sémantique */
  --c-stroke-s:var(--g-stroke-0);
  --c-stroke-l:var(--g-stroke-1);

  /* Couleurs — Fill (fonds) */
  --c-fill-brand-default:var(--g-primary-400);
  --c-fill-brand-strong:var(--g-primary-400);
  --c-fill-brand-subtle:var(--g-primary-100);
  --c-fill-neutral-white:var(--g-neutral-100);
  --c-fill-neutral-subtle:var(--g-neutral-100);
  --c-fill-status-disabled:var(--g-neutral-100);
  --c-fill-status-error-default:var(--g-red-100);
  --c-fill-status-error-subtle:var(--g-red-alpha-10);

  /* Couleurs — Stroke (bordures) */
  --c-stroke-brand-default:var(--g-primary-400);
  --c-stroke-primary-default:var(--g-neutral-200);
  --c-stroke-status-disabled:var(--g-neutral-200);
  --c-stroke-status-error:var(--g-red-100);
  --c-stroke-focus-default:var(--g-primary-alpha-10);
  --c-stroke-focus-error:var(--g-red-alpha-10);

  /* Couleurs — Texte */
  --c-text-primary:var(--g-neutral-900);
  --c-text-secondary:var(--g-neutral-500);
  --c-text-inverse:var(--g-neutral-100);
  --c-text-brand:var(--g-primary-400);
  --c-text-status-disabled:var(--g-neutral-200);
  --c-text-status-error:var(--g-red-100);

  /* Couleurs — Icônes */
  --c-icon-white:var(--g-neutral-100);
  --c-icon-black:var(--g-neutral-900);
  --c-icon-grey:var(--g-neutral-500);
  --c-icon-brand:var(--g-primary-400);
  --c-icon-status-disabled:var(--g-neutral-200);
  --c-icon-status-error:var(--g-red-100);

  /* Bouton — composé à partir des tokens génériques existants
     (pas de token "bouton" dédié dans l'export Figma) */
  --c-btn-padding-x:var(--g-spacing-4);   /* Padding/L : 16px */
  --c-btn-padding-y:var(--g-spacing-3);   /* Padding/M : 12px */
  --c-btn-gap:var(--g-spacing-2);         /* Gap/XS : 8px */
  --c-btn-radius:var(--g-radius-4);       /* Radius/M : 8px */

  /* Breakpoints (convention standard, non fournie par Figma) */
  --bp-mobile:640px;
  --bp-tablet:1024px;


  /* ===================== TYPOGRAPHIE ===================== */
  --font-heading:'Bricolage Grotesque', Georgia, serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Headings — taille / poids fixe (Bold) / line-height auto */
  --h1-size:68px; --h1-weight:700;
  --h2-size:56px; --h2-weight:700;
  --h3-size:46px; --h3-weight:700;
  --h4-size:38px; --h4-weight:700;
  --h5-size:32px; --h5-weight:700;
  --h6-size:26px; --h6-weight:700;
  --h7-size:22px; --h7-weight:700;

  /* Body */
  --b1-size:18px; --b1-line:27px; --b1-weight:500;
  --b2-size:16px; --b2-line:24px; --b2-weight:400;
  --b3-size:14px; --b3-line:21px; --b3-weight:400;
  --b4-size:12px; --b4-line:18px; --b4-weight:400;
  --b5-size:10px; --b5-line:15px; --b5-weight:400;
}

/* ===================== APPLICATION TYPO ===================== */
h1,.h1{font-family:var(--font-heading);font-size:var(--h1-size);font-weight:var(--h1-weight)}
h2,.h2{font-family:var(--font-heading);font-size:var(--h2-size);font-weight:var(--h2-weight)}
h3,.h3{font-family:var(--font-heading);font-size:var(--h3-size);font-weight:var(--h3-weight)}
h4,.h4{font-family:var(--font-heading);font-size:var(--h4-size);font-weight:var(--h4-weight)}
h5,.h5{font-family:var(--font-heading);font-size:var(--h5-size);font-weight:var(--h5-weight)}
h6,.h6{font-family:var(--font-heading);font-size:var(--h6-size);font-weight:var(--h6-weight)}
.h7{font-family:var(--font-heading);font-size:var(--h7-size);font-weight:var(--h7-weight)}

body,p{font-family:var(--font-body)}
.text-b1{font-size:var(--b1-size);line-height:var(--b1-line);font-weight:var(--b1-weight)}
.text-b2{font-size:var(--b2-size);line-height:var(--b2-line);font-weight:var(--b2-weight)}
.text-b3{font-size:var(--b3-size);line-height:var(--b3-line);font-weight:var(--b3-weight)}
.text-b4{font-size:var(--b4-size);line-height:var(--b4-line);font-weight:var(--b4-weight)}
.text-b5{font-size:var(--b5-size);line-height:var(--b5-line);font-weight:var(--b5-weight)}

/* Responsive : les tailles Figma desktop sont réduites sur mobile pour rester lisibles */
@media(max-width:640px){
  :root{
    --h1-size:40px; --h2-size:34px; --h3-size:30px;
    --h4-size:26px; --h5-size:24px; --h6-size:22px; --h7-size:20px;
  }
}