/* ============================================================
   Haland Learning, design tokens
   Extracted from Figma: "Haland Webpage (Copy)"
   file tfVBBTNFnHexpEoH4GCHsf, node 154:6618 (Instructor training)
   Read 2026-09-07. Every value below came from the design file,
   not from judgement.
   ============================================================ */

:root {
  /* --- brand ------------------------------------------------ */
  --orange:        #f97316;  /* eyebrows, rules, card top bars   */
  --green:         #56a243;  /* primary CTA                      */
  --ink:           #1e2430;  /* headings, number chips           */
  --ink-deep:      #161c24;  /* stat bar, dark sections          */
  --ink-blue:      #111a2b;  /* section wash behind white cards  */

  /* --- text ------------------------------------------------- */
  --text-body:     #6b7280;
  --text-strong:   #4b5563;
  --text-muted:    #9ca3af;
  --text-on-dark:  #d1d5db;
  --text-stat:     #c2c2c2;

  /* --- lines & surfaces ------------------------------------- */
  --line:          #f0f0f0;
  --line-soft:     #f3f4f6;
  --surface:       #ffffff;
  --surface-alt:   #f9fafb;
  --hero-scrim:    rgba(22, 28, 36, 0.85);
  --card-shadow:   0 2px 15px -3px rgba(0, 0, 0, 0.07);

  /* --- type ------------------------------------------------- */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ui: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- chrome (header/footer), read from Figma node 154:6619 --------- */
  --navy:          #1d3252;  /* utility bar bg, nav link colour        */
  --green-cta:     #57a145;  /* phone, Contact button, utility accent  */
  --utility-text:  rgba(255,255,255,0.59);
  --nav-size:      17px;   --nav-ls: -0.2px;
  --utility-size:  16px;
  --logo-w:        220.78px;  --logo-h: 71.36px;

  --h1:            72px;   --h1-lh:      72px;    --h1-ls:  -2.16px;
  --h2:            36px;   --h2-lh:    43.2px;    --h2-ls:  -0.72px;
  --h3:            21px;   --h3-lh:    28px;
  --eyebrow:       14px;   --eyebrow-lh:  24px;   --eyebrow-ls: 2px;
  --lead:          20px;   --lead-lh:     34px;
  --intro:         20px;   --intro-lh:  32px;
  --body:          18px;   --body-lh:  30px;
  --small:         16px;   --small-lh:  24px;
  --stat:          52px;   --stat-lh:     56px;
  --stat-label:    14px;   --stat-label-ls: 1.6px;

  /* --- layout ----------------------------------------------- */
  --container:     1200px;
  --gutter:        120px;   /* desktop section padding-inline   */
  --section-y:      64px;   /* desktop section padding-block    */
  --card-pad:       40px;
  --grid-gap:       28px;
  --radius:          4px;
}

/* Section rhythm below 1200px. The Figma file has a mobile
   breakpoint section but it was not used to derive these:
   they are conventional step-downs and should be checked
   against "Mobile breakpoint" (node 47:4) before launch. */
@media (max-width: 1100px) {
  :root { --gutter: 48px; --section-y: 52px; --h1: 48px; --h1-lh: 52px; --h2: 30px; --h2-lh: 36px; }
}
@media (max-width: 640px) {
  :root { --gutter: 20px; --section-y: 44px; --h1: 34px; --h1-lh: 38px; --h1-ls: -1px;
          --h2: 25px; --h2-lh: 30px; --card-pad: 26px; --lead: 17px; --lead-lh: 28px; }
}