:root {
  /* ===== PRIMARY / BRAND ===== */
  --c-primary:        #10494C;
  --c-primary-light:  #10494C;
  /* Jaune marque unique = le plus vif (#F0FF33). secondary-dark = même teinte (hover via color-mix / filter ailleurs). */
  --c-secondary:      #F0FF33;
  --c-secondary-dark: #F0FF33;

  /* ===== NEUTRALS (Gray scale) ===== */
  --c-white:    #FFFFFF;
  --c-black:    #000000;
  --c-gray-50:  #FAFAFA;
  --c-gray-100: #F8F9FA;
  --c-gray-200: #E9EEEF;
  --c-gray-300: #D6E0E2;
  --c-gray-400: #A8B8BC;
  --c-gray-500: #788C8F;
  --c-gray-600: #546C70;
  --c-gray-700: #3C575B;
  --c-gray-800: #254246;
  --c-gray-900: #001518;

  /* ===== TEAL (primary extended) ===== */
  --c-teal-100: #CFF4FC;
  --c-teal-200: #A3E8F5;
  --c-teal-300: #6DD4E8;
  --c-teal-400: #3AAFBD;
  --c-teal-500: #1A7A83;
  --c-teal-600: #10636A;
  --c-teal-700: #0E555B;
  --c-teal-800: #10494C;
  --c-teal-900: #002E33;

  /* Texte sur fonds clairs (catalogue, bandeaux blancs) */
  --c-text-on-light: #002E33;

  /* ===== STATUS ===== */
  --c-success:     #198754;
  --c-success-bg:  #D1E7DD;

  --c-warning:     #FFC107;
  --c-warning-bg:  #FFF3CD;
  --c-danger:      #DC3545;
  --c-danger-bg:   #F8D7DA;
  --c-info:        #0DCAF0;
  --c-info-bg:     #CFF4FC;

  /* Pastilles température + promos (navline + .badge-temp-*) */
  --c-badge-dry-bg: #F0E8DC;
  --c-badge-dry-fg: #7A5C45;
  --c-badge-fresh-bg: #C6E7E1;
  --c-badge-fresh-fg: #002E33;
  --c-badge-frozen-bg: #9EEAF9;
  --c-badge-frozen-fg: #002E33;
  /* Pastilles navigation : Promotions ↔ Nouveautés (tokens partagés nav + pages). */
  --c-badge-promo-bg: var(--c-secondary);
  --c-badge-promo-fg: #DC3545;
  --c-badge-new-bg: #F4DBE9;
  --c-badge-new-fg: #D63384;

  /* Prix promo (card, fiche article, panier, livraison) = même teinte que la pastille Promotions. */
  --c-promo-bg: var(--c-badge-promo-bg);
  --c-promo-fg: var(--c-badge-promo-fg);

  /* Pastilles actives fournisseur + Permanent / Précommande (fond sombre) */
  --c-pill-dark-bg: #002E33;

  /* ===== TYPOGRAPHY ===== */
  --ff-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ff-display: 'Steppe Trial', 'Inter', sans-serif;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;

  --lh-tight:  1;
  --lh-snug:   1.333;
  --lh-normal: 1.5;
  --lh-relaxed:1.714;
  --lh-loose:  1.6;

  /* ===== SPACING ===== */
  --sp-1:  4px;
  --sp-2:  6px;
  --sp-3:  8px;
  --sp-4:  10px;
  --sp-5:  12px;
  --sp-6:  16px;
  --sp-7:  20px;
  --sp-8:  24px;
  --sp-9:  32px;
  --sp-10: 40px;
  --sp-11: 48px;
  --sp-12: 64px;

  /* ===== BORDER RADIUS ===== */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:  10px;
  --radius-2xl: 12px;
  --radius-3xl: 16px;
  --radius-full: 9999px;

  /* ===== SHADOWS ===== */
  --shadow-sm:   0px 2px 4px 0px rgba(0,0,0,0.08);
  --shadow-md:   0px 4px 8px 0px rgba(0,0,0,0.12);
  --shadow-lg:   0px 8px 24px 0px rgba(0,0,0,0.16);

  /* ===== Z-INDEX ===== */
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-fixed:     300;
  --z-overlay:   400;
  --z-modal:     500;
  --z-popover:   600;
  --z-tooltip:   700;

  /* ===== LAYOUT ===== */
  --topbar-h:    64px;
  --header-h:    88px;
  --sidebar-w:   240px;
  --breadcrumb-h:44px;
  --container-max:1440px;

  /* ===== TRANSITIONS ===== */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}