/*
 * Jetons du design system Trade Medical (variables CSS), chargés sur tout le site.
 *
 * Source de vérité : design system Trade Medical, archive « Trade Medical Design System (6) »,
 * fichier colors_and_type.css, bloc :root reproduit à l'identique (seules les annotations
 * d'outil « @kind » sont retirées), à une exception près : l'échelle typographique --text-*
 * est convertie de rem en px (base de 16px du design system), voir la section correspondante.
 * Ne pas modifier une valeur ici sans la modifier d'abord dans le design system.
 *
 * Ce fichier ne contient que des variables : aucun sélecteur de mise en forme, aucune police
 * chargée. css/tm-home.css et css/product.css définissent encore une partie de ces variables
 * avec les mêmes valeurs ; leur nettoyage fera l'objet d'un chantier séparé.
 */
:root {
  /* =============================================================
     COLOR — Brand
     ============================================================= */
  --tm-blue:          #015ee7;   /* primary                       */
  --tm-yellow:        #fbd537;   /* accent                        */
  --tm-black:         #0a0f1a;   /* near-black, not pure          */
  --tm-pale-blue:     #e3dffe;   /* soft tinted background        */
  --tm-green:         #6fae6e;   /* secondary / eco / success     */
  --tm-orange:        #ee7c4c;   /* secondary / warmth / warning  */

  /* =============================================================
     COLOR — Primary blue scale (tinted, warm)
     Mixed around #015ee7 for surfaces, hovers, borders
     ============================================================= */
  --tm-blue-50:   #eff4ff;
  --tm-blue-100:  #dbe6ff;
  --tm-blue-200:  #b8ccff;
  --tm-blue-300:  #85a8ff;
  --tm-blue-400:  #4d82fb;
  --tm-blue-500:  #015ee7;  /* = --tm-blue */
  --tm-blue-600:  #0149bc;
  --tm-blue-700:  #023b97;
  --tm-blue-800:  #072f73;
  --tm-blue-900:  #0b2456;

  /* =============================================================
     COLOR — Pale blue scale (the lavender-ish surface color)
     ============================================================= */
  --tm-pale-50:   #f7f5ff;
  --tm-pale-100:  #e3dffe;  /* = --tm-pale-blue */
  --tm-pale-200:  #cec6fc;
  --tm-pale-300:  #b3a8f7;

  /* =============================================================
     COLOR — Yellow scale (accent)
     ============================================================= */
  --tm-yellow-50:   #fffaea;
  --tm-yellow-100:  #fff1c2;
  --tm-yellow-200:  #ffe485;
  --tm-yellow-300:  #fbd537;  /* = --tm-yellow */
  --tm-yellow-400:  #e8ba0d;
  --tm-yellow-500:  #b8930a;

  /* =============================================================
     COLOR — Green (success / eco-impact)
     ============================================================= */
  --tm-green-50:   #eff7ee;
  --tm-green-100:  #d6ead4;
  --tm-green-200:  #aed5ac;
  --tm-green-300:  #6fae6e;  /* = --tm-green */
  --tm-green-400:  #4e8e4d;
  --tm-green-500:  #356a34;

  /* =============================================================
     COLOR — Orange (secondary warmth / warning)
     ============================================================= */
  --tm-orange-50:   #fef3ed;
  --tm-orange-100:  #fbdccc;
  --tm-orange-200:  #f5b699;
  --tm-orange-300:  #ee7c4c;  /* = --tm-orange */
  --tm-orange-400:  #d55d2a;
  --tm-orange-500:  #a1431c;

  /* =============================================================
     COLOR — Neutrals (warm-cool, slightly blue-tinted)
     ============================================================= */
  --tm-neutral-0:    #ffffff;
  --tm-neutral-25:   #fafbfd;   /* app background                */
  --tm-neutral-50:   #f4f6fa;   /* subtle surface                */
  --tm-neutral-100:  #e9edf3;   /* hairline / divider soft       */
  --tm-neutral-200:  #d6dce6;   /* border                        */
  --tm-neutral-300:  #bac2d0;   /* disabled outline              */
  --tm-neutral-400:  #8b94a6;   /* muted icon                    */
  --tm-neutral-500:  #606a7d;   /* secondary text                */
  --tm-neutral-600:  #454e60;   /* strong secondary text         */
  --tm-neutral-700:  #2f3644;   /* body text                     */
  --tm-neutral-800:  #1b2030;   /* headings                      */
  --tm-neutral-900:  #0a0f1a;   /* = --tm-black                  */

  /* =============================================================
     SEMANTIC — Foreground
     ============================================================= */
  --fg-1:          var(--tm-neutral-900); /* primary text, headings */
  --fg-2:          var(--tm-neutral-700); /* body text              */
  --fg-3:          var(--tm-neutral-500); /* secondary / muted      */
  --fg-4:          var(--tm-neutral-400); /* placeholder / disabled */
  --fg-inverse:    var(--tm-neutral-0);   /* text on blue bg        */
  --fg-brand:      var(--tm-blue-500);    /* links, accents         */
  --fg-on-yellow:  var(--tm-neutral-900); /* text on yellow         */

  /* =============================================================
     SEMANTIC — Background / surfaces
     ============================================================= */
  --bg-app:        var(--tm-neutral-25);
  --bg-surface:    var(--tm-neutral-0);
  --bg-sunken:     var(--tm-neutral-50);
  --bg-raised:     var(--tm-neutral-0);
  --bg-inverse:    var(--tm-blue-900);
  --bg-brand:      var(--tm-blue-500);
  --bg-brand-soft: var(--tm-pale-blue);
  --bg-accent:     var(--tm-yellow-300);
  --bg-success-soft: var(--tm-green-50);
  --bg-warning-soft: var(--tm-orange-50);

  /* =============================================================
     SEMANTIC — Borders
     ============================================================= */
  --border-subtle:  var(--tm-neutral-100);
  --border-default: var(--tm-neutral-200);
  --border-strong:  var(--tm-neutral-300);
  --border-brand:   var(--tm-blue-500);
  --border-focus:   var(--tm-blue-400);

  /* =============================================================
     SEMANTIC — Feedback
     ============================================================= */
  --success:        var(--tm-green-400);
  --success-soft:   var(--tm-green-50);
  --success-fg:     var(--tm-green-500);
  --warning:        var(--tm-orange-300);
  --warning-soft:   var(--tm-orange-50);
  --warning-fg:     var(--tm-orange-500);
  --danger:         #d93a3a;
  --danger-soft:    #fde8e8;
  --danger-fg:      #9b1c1c;
  --info:           var(--tm-blue-500);
  --info-soft:      var(--tm-blue-50);
  --info-fg:        var(--tm-blue-700);

  /* =============================================================
     TYPOGRAPHY — Families
     ============================================================= */
  --font-sans:     'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display:  'Fraunces', 'Poppins', Georgia, serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* =============================================================
     TYPOGRAPHY — Scale
     Le design system exprime cette échelle en rem avec 1rem = 16px. Besa fixe la taille racine
     du site à 14px (besa/css/template.css : html { font-size: 14px }) : en rem, toutes les
     tailles seraient réduites d'un huitième. Elles sont donc données ici en px, valeurs du design
     system multipliées par sa base de 16px.
     ============================================================= */
  --text-2xs: 11px; /* 0.6875rem dans le design system */
  --text-xs: 12px; /* 0.75rem dans le design system */
  --text-sm: 14px; /* 0.875rem dans le design system */
  --text-base: 16px; /* 1rem dans le design system */
  --text-md: 18px; /* 1.125rem dans le design system */
  --text-lg: 20px; /* 1.25rem dans le design system */
  --text-xl: 24px; /* 1.5rem dans le design system */
  --text-2xl: 30px; /* 1.875rem dans le design system */
  --text-3xl: 36px; /* 2.25rem dans le design system */
  --text-4xl: 46px; /* 2.875rem dans le design system */
  --text-5xl: 60px; /* 3.75rem dans le design system */
  --text-6xl: 72px; /* 4.5rem dans le design system */

  /* =============================================================
     TYPOGRAPHY — Weights
     ============================================================= */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* =============================================================
     TYPOGRAPHY — Line heights
     ============================================================= */
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* =============================================================
     TYPOGRAPHY — Tracking
     ============================================================= */
  --ls-tight: -0.02em;
  --ls-snug: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.04em;
  --ls-widest: 0.12em;

  /* =============================================================
     SPACING — 4-px base scale
     ============================================================= */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* =============================================================
     RADII — Friendly (8-12px)
     ============================================================= */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px; /* default for inputs, small cards       */
  --radius-lg:   14px; /* default for cards, modals             */
  --radius-xl:   20px; /* hero cards, featured panels           */
  --radius-2xl:  28px; /* full-bleed marketing blocks           */
  --radius-pill: 999px;

  /* =============================================================
     SHADOWS — Soft, blue-tinted (never gray-black)
     ============================================================= */
  --shadow-xs:  0 1px 2px rgba(11, 36, 86, 0.06);
  --shadow-sm:  0 2px 6px rgba(11, 36, 86, 0.06), 0 1px 2px rgba(11, 36, 86, 0.04);
  --shadow-md:  0 6px 18px rgba(11, 36, 86, 0.08), 0 2px 6px rgba(11, 36, 86, 0.04);
  --shadow-lg:  0 16px 36px rgba(11, 36, 86, 0.12), 0 4px 10px rgba(11, 36, 86, 0.06);
  --shadow-xl:  0 28px 60px rgba(11, 36, 86, 0.16), 0 8px 20px rgba(11, 36, 86, 0.08);
  --shadow-inner: inset 0 1px 2px rgba(11, 36, 86, 0.06);
  --shadow-focus: 0 0 0 4px rgba(1, 94, 231, 0.18);

  /* =============================================================
     MOTION — Easing & duration
     ============================================================= */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 140ms;
  --dur-normal: 220ms;
  --dur-slow: 380ms;
}