/* =========================================================
   STEENHELDER - Design System Variables for Webflow
   =========================================================
   How to use in Webflow:
   1. Go to your Webflow project → Site settings → Custom code
      → Head code, and paste the <style> block below (wrap this
      file's contents in <style>…</style>).
   2. OR - for native Webflow Variables (Oct 2024+):
      Site settings → Design system → Variables.
      Create the same tokens there using the values listed.
   3. Reference tokens in class styles with var(--shl-color-ink-900) etc.
   ========================================================= */

:root {
  /* --- COLORS · Ink (primary / text) --------------------- */
  --shl-color-ink-950: #0B1A2E;
  --shl-color-ink-900: #0F2A47;  /* primary text + dark sections */
  --shl-color-ink-800: #173658;
  --shl-color-ink-700: #23456E;

  /* --- COLORS · Steel (neutrals, UI backgrounds) --------- */
  --shl-color-steel-50:  #F4F7FB;
  --shl-color-steel-100: #E6EDF5;
  --shl-color-steel-200: #C9D6E5;

  /* --- COLORS · Sand (warm section backgrounds) ---------- */
  --shl-color-sand-50:  #F8F6F1;
  --shl-color-sand-100: #F1ECE3;

  /* --- COLORS · Sky (accent / CTA secondary) ------------- */
  --shl-color-sky-400: #3DA9FC;
  --shl-color-sky-500: #1E8BE6;
  --shl-color-sky-600: #0F6FBF;

  /* --- COLORS · Leaf (eco / success) --------------------- */
  --shl-color-leaf-500: #16A34A;
  --shl-color-leaf-600: #0F8A3C;

  /* --- COLORS · Utility ---------------------------------- */
  --shl-color-white:  #FFFFFF;
  --shl-color-amber-400: #FBBF24; /* review stars */
  --shl-color-amber-500: #F59E0B;

  /* --- SEMANTIC aliases (use these in components) -------- */
  --shl-bg-page:        var(--shl-color-white);
  --shl-bg-section-alt: var(--shl-color-sand-50);
  --shl-bg-dark:        var(--shl-color-ink-900);
  --shl-bg-surface:     var(--shl-color-white);
  --shl-bg-input:       var(--shl-color-steel-50);

  --shl-text-primary:   var(--shl-color-ink-900);
  --shl-text-secondary: rgba(15, 42, 71, 0.80);  /* ink-900 @ 80 */
  --shl-text-muted:     rgba(15, 42, 71, 0.60);
  --shl-text-on-dark:   #FFFFFF;
  --shl-text-on-dark-muted: rgba(255, 255, 255, 0.75);

  --shl-accent:            var(--shl-color-sky-500);
  --shl-accent-hover:      var(--shl-color-sky-600);
  --shl-accent-soft:       var(--shl-color-sky-400);
  --shl-eco:               var(--shl-color-leaf-500);
  --shl-eco-hover:         var(--shl-color-leaf-600);

  --shl-border:            var(--shl-color-steel-100);
  --shl-border-strong:     var(--shl-color-steel-200);

  /* --- TYPOGRAPHY · Families ----------------------------- */
  --shl-font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --shl-font-sans:    "Inter", system-ui, sans-serif;

  /* --- TYPOGRAPHY · Weights ------------------------------ */
  --shl-weight-regular:  400;
  --shl-weight-medium:   500;
  --shl-weight-semibold: 600;
  --shl-weight-bold:     700;
  --shl-weight-extra:    800;

  /* --- TYPOGRAPHY · Sizes (rem-based, 16px root) --------- */
  --shl-text-xs:   0.75rem;   /* 12 · tags, meta */
  --shl-text-sm:   0.875rem;  /* 14 · body small */
  --shl-text-base: 1rem;      /* 16 · body */
  --shl-text-lg:   1.125rem;  /* 18 · hero sub */
  --shl-text-xl:   1.25rem;   /* 20 · card title */
  --shl-text-2xl:  1.5rem;    /* 24 · card title lg */
  --shl-text-3xl:  1.875rem;  /* 30 · h2 mobile */
  --shl-text-4xl:  2.25rem;   /* 36 · h1 mobile */
  --shl-text-5xl:  3rem;      /* 48 · h2 desktop */
  --shl-text-6xl:  3.75rem;   /* 60 · h1 desktop */

  /* --- TYPOGRAPHY · Tracking ----------------------------- */
  --shl-tracking-tight:  -0.02em;   /* display headings */
  --shl-tracking-normal: 0;
  --shl-tracking-wide:   0.06em;
  --shl-tracking-wider:  0.18em;    /* eyebrow labels */

  /* --- TYPOGRAPHY · Line heights ------------------------- */
  --shl-leading-tight:   1.05;   /* large display */
  --shl-leading-snug:    1.2;
  --shl-leading-normal:  1.5;
  --shl-leading-relaxed: 1.7;

  /* --- SPACING SCALE (Tailwind-aligned) ------------------ */
  --shl-space-1:  0.25rem;   /* 4 */
  --shl-space-2:  0.5rem;    /* 8 */
  --shl-space-3:  0.75rem;   /* 12 */
  --shl-space-4:  1rem;      /* 16 */
  --shl-space-5:  1.25rem;   /* 20 */
  --shl-space-6:  1.5rem;    /* 24 */
  --shl-space-8:  2rem;      /* 32 */
  --shl-space-10: 2.5rem;    /* 40 */
  --shl-space-12: 3rem;      /* 48 */
  --shl-space-16: 4rem;      /* 64 */
  --shl-space-20: 5rem;      /* 80 · section Y mobile */
  --shl-space-28: 7rem;      /* 112 · section Y desktop */

  /* --- LAYOUT -------------------------------------------- */
  --shl-container-max: 80rem; /* 1280 · max-w-7xl */
  --shl-gutter:        1.5rem;

  /* --- RADIUS -------------------------------------------- */
  --shl-radius-sm:   0.375rem;   /* 6  · small chips */
  --shl-radius-md:   0.5rem;     /* 8  · icon boxes */
  --shl-radius-lg:   0.75rem;    /* 12 · inputs */
  --shl-radius-xl:   1rem;       /* 16 · nav dropdown */
  --shl-radius-2xl:  1.25rem;    /* 20 · cards */
  --shl-radius-3xl:  1.75rem;    /* 28 · large cards */
  --shl-radius-pill: 9999px;     /* pills, buttons */

  /* --- SHADOWS ------------------------------------------- */
  --shl-shadow-card: 0 1px 2px rgba(15, 42, 71, 0.06),
                     0 8px 24px -8px rgba(15, 42, 71, 0.18);
  --shl-shadow-lift: 0 2px 4px rgba(15, 42, 71, 0.06),
                     0 24px 48px -16px rgba(15, 42, 71, 0.28);
  --shl-shadow-hair: 0 1px 0 rgba(15, 42, 71, 0.08);

  /* --- MOTION -------------------------------------------- */
  --shl-duration-fast:   150ms;
  --shl-duration-base:   300ms;
  --shl-duration-slow:   700ms;
  --shl-ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);

  /* --- FOCUS RING ---------------------------------------- */
  --shl-ring: 0 0 0 2px var(--shl-color-sky-400);
}

/* =========================================================
   OPTIONAL · Base typography helpers you can apply to
   Webflow body / heading defaults.
   ========================================================= */
body {
  font-family: var(--shl-font-sans);
  color: var(--shl-text-primary);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--shl-font-display);
  letter-spacing: var(--shl-tracking-tight);
  line-height: var(--shl-leading-tight);
  font-weight: var(--shl-weight-extra);
}
.shl-eyebrow {
  font-size: var(--shl-text-xs);
  font-weight: var(--shl-weight-semibold);
  letter-spacing: var(--shl-tracking-wider);
  text-transform: uppercase;
  color: var(--shl-color-sky-600);
}