/* ============================================================
   CUILLÈRE D'OR — DESIGN TOKENS
   Architecture 3 couches : Primitive → Semantic → Component
   Source de vérité unique pour TOUTES les valeurs visuelles
   ============================================================ */

:root {
  /* ============================================================
     LAYER 1 — PRIMITIVE TOKENS (raw values)
     Ne JAMAIS utiliser directement dans les composants.
     ============================================================ */

  /* --- Couleurs brand --- */
  --primitive-forest-900: #07160d;
  --primitive-forest-800: #0c2014;
  --primitive-forest-700: #142e1f;
  --primitive-forest-600: #1d3e2c;
  --primitive-forest-500: #2a5240;

  --primitive-gold-700: #9c8023;
  --primitive-gold-600: #b3922a;
  --primitive-gold-500: #cca830;
  --primitive-gold-400: #d9b855;
  --primitive-gold-300: #e6cb83;
  --primitive-gold-100: #f5ecca;

  --primitive-cream-100: #fcf9f8;
  --primitive-cream-200: #f6f1ed;
  --primitive-cream-300: #ede5dd;
  --primitive-cream-400: #d8cdc2;

  /* --- Bordeaux (Espace Partenaires — Q12) --- */
  --primitive-bordeaux-900: #4a1c30;
  --primitive-bordeaux-800: #5d2440;
  --primitive-bordeaux-700: #7d2e4f;
  --primitive-bordeaux-500: #a8466e;
  --primitive-bordeaux-300: #d18ba6;
  --primitive-bordeaux-100: #f5e3eb;

  /* --- Neutres --- */
  --primitive-neutral-0:   #ffffff;
  --primitive-neutral-50:  #fafaf9;
  --primitive-neutral-100: #f5f4f1;
  --primitive-neutral-200: #e8e6e1;
  --primitive-neutral-300: #d1cec7;
  --primitive-neutral-400: #a8a39a;
  --primitive-neutral-500: #7d786e;
  --primitive-neutral-600: #5a564f;
  --primitive-neutral-700: #3d3a35;
  --primitive-neutral-800: #24221f;
  --primitive-neutral-900: #131210;

  /* --- États sémantiques --- */
  --primitive-red-700:    #8b1a1a;
  --primitive-red-500:    #c0392b;
  --primitive-red-100:    #fbe9e7;

  --primitive-amber-500:  #e0a83a;
  --primitive-amber-100:  #fff4d6;

  --primitive-green-600:  #2d6a4f;
  --primitive-green-100:  #d8f3e1;

  /* --- Typographie : familles --- */
  --primitive-font-serif:  'Noto Serif', 'Times New Roman', Georgia, serif;
  --primitive-font-sans:   'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --primitive-font-mono:   'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* --- Typographie : tailles (échelle modulaire 1.25) --- */
  --primitive-fs-10:  0.625rem;   /* 10px */
  --primitive-fs-11:  0.6875rem;  /* 11px */
  --primitive-fs-12:  0.75rem;    /* 12px */
  --primitive-fs-13:  0.8125rem;  /* 13px */
  --primitive-fs-14:  0.875rem;   /* 14px */
  --primitive-fs-15:  0.9375rem;  /* 15px */
  --primitive-fs-16:  1rem;       /* 16px */
  --primitive-fs-18:  1.125rem;   /* 18px */
  --primitive-fs-20:  1.25rem;    /* 20px */
  --primitive-fs-24:  1.5rem;     /* 24px */
  --primitive-fs-28:  1.75rem;    /* 28px */
  --primitive-fs-32:  2rem;       /* 32px */
  --primitive-fs-40:  2.5rem;     /* 40px */
  --primitive-fs-48:  3rem;       /* 48px */
  --primitive-fs-56:  3.5rem;     /* 56px */
  --primitive-fs-64:  4rem;       /* 64px */
  --primitive-fs-80:  5rem;       /* 80px */

  /* --- Typographie : graisse --- */
  --primitive-fw-300: 300;
  --primitive-fw-400: 400;
  --primitive-fw-500: 500;
  --primitive-fw-600: 600;
  --primitive-fw-700: 700;
  --primitive-fw-800: 800;

  /* --- Typographie : interlignage --- */
  --primitive-lh-tight:  1.1;
  --primitive-lh-snug:   1.25;
  --primitive-lh-normal: 1.5;
  --primitive-lh-relaxed: 1.75;

  /* --- Typographie : letter-spacing --- */
  --primitive-ls-tight:   -0.02em;
  --primitive-ls-normal:  0;
  --primitive-ls-wide:    0.04em;
  --primitive-ls-wider:   0.08em;
  --primitive-ls-widest:  0.16em;

  /* --- Espacement (échelle 4px) --- */
  --primitive-space-0:   0;
  --primitive-space-1:   0.25rem;   /* 4px */
  --primitive-space-2:   0.5rem;    /* 8px */
  --primitive-space-3:   0.75rem;   /* 12px */
  --primitive-space-4:   1rem;      /* 16px */
  --primitive-space-5:   1.25rem;   /* 20px */
  --primitive-space-6:   1.5rem;    /* 24px */
  --primitive-space-8:   2rem;      /* 32px */
  --primitive-space-10:  2.5rem;    /* 40px */
  --primitive-space-12:  3rem;      /* 48px */
  --primitive-space-16:  4rem;      /* 64px */
  --primitive-space-20:  5rem;      /* 80px */
  --primitive-space-24:  6rem;      /* 96px */
  --primitive-space-32:  8rem;      /* 128px */

  /* --- Border radius (CDO = 0px partout, sauf full pour avatars) --- */
  --primitive-radius-0:    0;
  --primitive-radius-full: 9999px;

  /* --- Bordures --- */
  --primitive-border-0:   0;
  --primitive-border-1:   1px;
  --primitive-border-2:   2px;
  --primitive-border-4:   4px;

  /* --- Z-index --- */
  --primitive-z-base:     0;
  --primitive-z-raised:   10;
  --primitive-z-overlay:  100;
  --primitive-z-modal:    1000;
  --primitive-z-toast:    10000;

  /* --- Durées d'animation --- */
  --primitive-duration-fast:    150ms;
  --primitive-duration-base:    250ms;
  --primitive-duration-slow:    400ms;

  --primitive-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --primitive-ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --primitive-ease-in:      cubic-bezier(0.4, 0, 1, 1);

  /* ============================================================
     LAYER 2 — SEMANTIC TOKENS (purpose-based aliases)
     Référencent toujours un primitive token.
     C'est ici que tu adaptes le sens, pas dans les composants.
     ============================================================ */

  /* --- Surfaces --- */
  --color-surface-page:        var(--primitive-cream-100);
  --color-surface-elevated:    var(--primitive-neutral-0);
  --color-surface-sunken:      var(--primitive-cream-200);
  --color-surface-inverse:     var(--primitive-forest-900);
  --color-surface-inverse-2:   var(--primitive-forest-800);
  --color-surface-accent:      var(--primitive-gold-100);

  /* --- Texte --- */
  --color-text-primary:        var(--primitive-neutral-900);
  --color-text-secondary:      var(--primitive-neutral-700);
  --color-text-muted:          var(--primitive-neutral-500);
  --color-text-disabled:       var(--primitive-neutral-400);
  --color-text-on-inverse:     var(--primitive-cream-100);
  --color-text-on-inverse-mu:  var(--primitive-neutral-400);
  --color-text-on-accent:      var(--primitive-forest-900);
  --color-text-brand:          var(--primitive-forest-900);
  --color-text-gold:           var(--primitive-gold-500);

  /* --- Bordures (CDO no-line rule : usage minimal) --- */
  --color-border-subtle:       var(--primitive-neutral-200);
  --color-border-default:      var(--primitive-neutral-300);
  --color-border-strong:       var(--primitive-forest-900);
  --color-border-inverse:      var(--primitive-forest-700);

  /* --- Brand --- */
  --color-brand-primary:       var(--primitive-forest-900);
  --color-brand-primary-hover: var(--primitive-forest-700);
  --color-brand-accent:        var(--primitive-gold-500);
  --color-brand-accent-hover:  var(--primitive-gold-600);

  /* --- États (feedback) --- */
  --color-status-danger:       var(--primitive-red-500);
  --color-status-danger-bg:    var(--primitive-red-100);
  --color-status-danger-text:  var(--primitive-red-700);

  --color-status-warning:      var(--primitive-amber-500);
  --color-status-warning-bg:   var(--primitive-amber-100);
  --color-status-warning-text: var(--primitive-neutral-900);

  --color-status-success:      var(--primitive-green-600);
  --color-status-success-bg:   var(--primitive-green-100);

  --color-status-info:         var(--primitive-forest-700);
  --color-status-info-bg:      var(--primitive-cream-200);

  /* --- Typographie sémantique --- */
  --font-display:  var(--primitive-font-serif);
  --font-heading:  var(--primitive-font-serif);
  --font-body:     var(--primitive-font-sans);
  --font-ui:       var(--primitive-font-sans);
  --font-data:     var(--primitive-font-sans);

  /* --- Échelle typographique sémantique --- */
  --fs-display-xl:  var(--primitive-fs-80);
  --fs-display-lg:  var(--primitive-fs-64);
  --fs-display-md:  var(--primitive-fs-48);
  --fs-display-sm:  var(--primitive-fs-40);

  --fs-heading-1:   var(--primitive-fs-32);
  --fs-heading-2:   var(--primitive-fs-28);
  --fs-heading-3:   var(--primitive-fs-24);
  --fs-heading-4:   var(--primitive-fs-20);
  --fs-heading-5:   var(--primitive-fs-18);

  --fs-body-lg:     var(--primitive-fs-18);
  --fs-body-md:     var(--primitive-fs-16);
  --fs-body-sm:     var(--primitive-fs-14);

  --fs-label-lg:    var(--primitive-fs-13);
  --fs-label-md:    var(--primitive-fs-12);
  --fs-label-sm:    var(--primitive-fs-11);

  --fs-data-xl:     var(--primitive-fs-56);
  --fs-data-lg:     var(--primitive-fs-40);
  --fs-data-md:     var(--primitive-fs-28);

  /* --- Espacement sémantique --- */
  --space-section-y: var(--primitive-space-12);
  --space-block-y:   var(--primitive-space-8);
  --space-stack-y:   var(--primitive-space-4);
  --space-inline:    var(--primitive-space-2);
  --space-page-x:    var(--primitive-space-8);

  /* --- Layout : largeurs --- */
  --layout-sidebar-w:        260px;
  --layout-sidebar-w-mobile: 240px;
  --layout-topnav-h:         72px;
  --layout-content-max:      1440px;
  --layout-content-narrow:   880px;
  --layout-content-wide:     1280px;

  /* --- Radius (rappel CDO : tout à 0) --- */
  --radius-none:  var(--primitive-radius-0);
  --radius-full:  var(--primitive-radius-full);

  /* ============================================================
     LAYER 3 — COMPONENT TOKENS (component-specific overrides)
     Permet d'ajuster un composant sans toucher aux semantic tokens.
     ============================================================ */

  /* --- Sidebar admin --- */
  --sidebar-bg:           var(--color-surface-inverse);
  --sidebar-border:       var(--color-border-inverse);
  --sidebar-text:         var(--color-text-on-inverse);
  --sidebar-text-muted:   var(--color-text-on-inverse-mu);
  --sidebar-item-hover-bg: var(--primitive-forest-800);
  --sidebar-item-active-bg: var(--primitive-forest-700);
  --sidebar-item-active-border: var(--primitive-gold-500);

  /* --- Topnav public --- */
  --topnav-bg:            var(--color-surface-elevated);
  --topnav-text:          var(--color-text-primary);
  --topnav-border:        var(--color-border-subtle);

  /* --- Card --- */
  --card-bg:              var(--color-surface-elevated);
  --card-border:          var(--color-border-subtle);
  --card-padding:         var(--primitive-space-6);
  --card-padding-sm:      var(--primitive-space-4);

  --card-inverse-bg:      var(--color-surface-inverse);
  --card-inverse-text:    var(--color-text-on-inverse);

  --card-accent-bg:       var(--color-surface-accent);
  --card-accent-text:     var(--color-text-on-accent);

  /* --- Button --- */
  --btn-primary-bg:       var(--color-brand-primary);
  --btn-primary-bg-hover: var(--color-brand-primary-hover);
  --btn-primary-text:     var(--color-text-on-inverse);

  --btn-secondary-bg:     transparent;
  --btn-secondary-border: var(--color-border-strong);
  --btn-secondary-text:   var(--color-text-primary);

  --btn-accent-bg:        var(--color-brand-accent);
  --btn-accent-bg-hover:  var(--color-brand-accent-hover);
  --btn-accent-text:      var(--color-text-on-accent);

  --btn-padding-x:        var(--primitive-space-6);
  --btn-padding-y:        var(--primitive-space-3);
  --btn-padding-x-sm:     var(--primitive-space-4);
  --btn-padding-y-sm:     var(--primitive-space-2);

  /* --- Stat (KPI) --- */
  --stat-value-fs:        var(--fs-data-lg);
  --stat-value-fw:        var(--primitive-fw-700);
  --stat-value-color:     var(--color-text-primary);
  --stat-label-fs:        var(--fs-label-md);
  --stat-label-color:     var(--color-text-muted);
  --stat-accent-color:    var(--color-brand-accent);

  /* --- Tag / Badge --- */
  --tag-padding-x:        var(--primitive-space-3);
  --tag-padding-y:        var(--primitive-space-1);
  --tag-fs:               var(--primitive-fs-11);
  --tag-fw:               var(--primitive-fw-600);
  --tag-ls:               var(--primitive-ls-wider);

  /* --- Table --- */
  --table-header-bg:      transparent;
  --table-header-fs:      var(--primitive-fs-11);
  --table-header-color:   var(--color-text-muted);
  --table-row-border:     var(--color-border-subtle);
  --table-cell-py:        var(--primitive-space-4);
  --table-cell-px:        var(--primitive-space-4);

  /* --- Input / Form --- */
  --input-bg:             var(--color-surface-elevated);
  --input-border:         var(--color-border-default);
  --input-border-focus:   var(--color-brand-primary);
  --input-text:           var(--color-text-primary);
  --input-placeholder:    var(--color-text-muted);
  --input-padding-x:      var(--primitive-space-4);
  --input-padding-y:      var(--primitive-space-3);
  --input-fs:             var(--fs-body-md);

  /* --- Tab --- */
  --tab-text:             var(--color-text-muted);
  --tab-text-active:      var(--color-text-primary);
  --tab-border-active:    var(--color-brand-accent);
  --tab-padding-x:        var(--primitive-space-4);
  --tab-padding-y:        var(--primitive-space-3);
}

/* Si on souhaite par la suite un mode sombre, c'est ici */
/*
html.dark {
  --color-surface-page:     var(--primitive-forest-900);
  --color-surface-elevated: var(--primitive-forest-800);
  --color-text-primary:     var(--primitive-cream-100);
}
*/