/* =============================================
   High Stack Solutions — Typography Tokens
   
   Headlines: Europa Grotesk SH (licensed)
     → Hanken Grotesk as substitute (see fonts.css)
   Body/Utility: Darker Grotesque (exact match)
   ============================================= */
:root {
  /* ── Font Families ───────────────────────── */
  --font-display: "Hanken Grotesk", "Archivo", sans-serif;
  --font-body:    "Darker Grotesque", "Hanken Grotesk", sans-serif;
  --font-mono:    "JetBrains Mono", "Fira Code", monospace;

  /* ── Type Scale ──────────────────────────── */
  --text-2xs:  0.6875rem;   /*  11px */
  --text-xs:   0.75rem;     /*  12px */
  --text-sm:   0.9375rem;   /*  15px */
  --text-base: 1.0625rem;   /*  17px — bumped for Darker Grotesque legibility */
  --text-md:   1.125rem;    /*  18px */
  --text-lg:   1.3125rem;   /*  21px */
  --text-xl:   1.5rem;      /*  24px */
  --text-2xl:  1.875rem;    /*  30px */
  --text-3xl:  2.375rem;    /*  38px */
  --text-4xl:  3rem;        /*  48px */
  --text-5xl:  3.75rem;     /*  60px */
  --text-6xl:  5rem;        /*  80px */

  /* ── Line Heights ────────────────────────── */
  --leading-none:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;

  /* ── Letter Spacing ──────────────────────── */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.10em;
  --tracking-widest:  0.18em;

  /* ── Font Weights ────────────────────────── */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  /* ── Semantic Roles (shorthand) ──────────── */
  --type-hero:     var(--weight-black)     var(--text-6xl)/var(--leading-tight)   var(--font-display);
  --type-h1:       var(--weight-black)     var(--text-5xl)/var(--leading-tight)   var(--font-display);
  --type-h2:       var(--weight-black)     var(--text-4xl)/var(--leading-tight)   var(--font-display);
  --type-h3:       var(--weight-bold)      var(--text-3xl)/var(--leading-snug)    var(--font-display);
  --type-h4:       var(--weight-bold)      var(--text-2xl)/var(--leading-snug)    var(--font-display);
  --type-h5:       var(--weight-bold)      var(--text-xl)/var(--leading-normal)   var(--font-display);
  --type-body-lg:  var(--weight-regular)   var(--text-lg)/var(--leading-relaxed)  var(--font-body);
  --type-body:     var(--weight-regular)   var(--text-base)/var(--leading-relaxed) var(--font-body);
  --type-body-sm:  var(--weight-regular)   var(--text-sm)/var(--leading-normal)   var(--font-body);
  --type-label:    var(--weight-semibold)  var(--text-sm)/1                       var(--font-body);
  --type-eyebrow:  var(--weight-bold)      var(--text-xs)/1                       var(--font-body);
  --type-caption:  var(--weight-regular)   var(--text-xs)/var(--leading-normal)   var(--font-body);
  --type-button:   var(--weight-bold)      var(--text-base)/1                     var(--font-body);
}