/* ============================================================
   SCALE NEARSHORING — Colors & Type Foundations
   ------------------------------------------------------------
   Brand font is AVENIR LT Pro (licensed). Local files live in
   fonts/ and are wired below. Three weights are available:
     Light  (300/400 — body)
     Medium (500/600 — sub-heads, semibold)
     Black  (700–900 — headlines, CTAs)
   ============================================================ */

@font-face {
  font-family: "Avenir LT Pro";
  src: url("fonts/AvenirLTProLight.otf") format("opentype");
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avenir LT Pro";
  src: url("fonts/AvenirLTProMedium.otf") format("opentype");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avenir LT Pro";
  src: url("fonts/AvenirLTProBlack.otf") format("opentype");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- BRAND PALETTE ---------- */
  --sn-white:        #FFFFFF;   /* backgrounds, text on dark sections */
  --sn-blue:         #2063A6;   /* primary brand blue — section bg, footer, headings */
  --sn-blue-light:   #428FDA;   /* accent — buttons, links, icons, "Why Choose" headings */
  --sn-blue-deep:    #066AAB;   /* form submit button, secondary CTA */
  --sn-green:        #AECC57;   /* CTA buttons, highlight text, accent sections */

  /* ---------- TEXT ---------- */
  --sn-ink:          #212121;   /* primary body text (dark gray) */
  --sn-ink-strong:   #111111;   /* near-black headings / icons */
  --sn-black:        #000000;   /* pure black — rare, some icons */
  --sn-ink-70:       rgba(0,0,0,0.70); /* input text color */

  /* ---------- NEUTRALS / UI ---------- */
  --sn-blue-gray:    #D7DAE9;   /* subtle backgrounds, dividers */
  --sn-gray-cool:    #D1D5DB;   /* borders, subtle bg (--ast-global-color-6) */
  --sn-offwhite:     #F0F5FA;   /* light section backgrounds (--ast-global-color-4) */
  --sn-border:       rgba(0,0,0,0.25); /* input borders */

  /* ---------- SEMANTIC ROLES ---------- */
  --sn-bg:           var(--sn-white);
  --sn-bg-alt:       var(--sn-offwhite);
  --sn-bg-dark:      var(--sn-blue);
  --sn-bg-accent:    var(--sn-green);
  --sn-fg:           var(--sn-ink);
  --sn-fg-on-dark:   var(--sn-white);
  --sn-heading:      var(--sn-blue);
  --sn-link:         var(--sn-blue-light);
  --sn-eyebrow:      var(--sn-green);   /* small green section labels e.g. "How It Works" */

  /* ---------- TYPE FAMILY ---------- */
  --sn-font: "Avenir LT Pro", "Avenir Next", "Avenir", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* ---------- TYPE SCALE (desktop) ---------- */
  --sn-h1:    clamp(2.6rem, 5vw, 4rem);     /* hero — "Boost Your IT Team's Productivity" */
  --sn-h2:    clamp(2rem, 3.5vw, 2.75rem);  /* section titles — "Why Choose Scale Nearshoring?" */
  --sn-h3:    1.5rem;                        /* card / column titles */
  --sn-h4:    1.125rem;                      /* sub-labels */
  --sn-body:  1.0625rem;                     /* 17px body */
  --sn-small: 0.875rem;
  --sn-eyebrow-size: 0.95rem;

  --sn-lh-tight: 1.15;
  --sn-lh-body:  1.6;

  /* ---------- WEIGHTS ---------- */
  --sn-w-regular: 400;
  --sn-w-semibold: 600;
  --sn-w-bold: 700;
  --sn-w-extrabold: 800;  /* hero + section headings render heavy */
  --sn-w-black: 900;

  /* ---------- RADII ---------- */
  --sn-radius-sm: 4px;     /* inputs, small buttons */
  --sn-radius:    6px;      /* buttons */
  --sn-radius-lg: 10px;     /* cards / panels */

  /* ---------- SHADOWS ---------- */
  --sn-shadow-panel: 18px 18px 0 rgba(0,0,0,0.12);  /* offset drop shadow on green panels */
  --sn-shadow-card:  0 6px 20px rgba(32,99,166,0.12);
  --sn-shadow-soft:  0 2px 8px rgba(0,0,0,0.08);

  /* ---------- SPACING ---------- */
  --sn-space-1: 4px;
  --sn-space-2: 8px;
  --sn-space-3: 12px;
  --sn-space-4: 16px;
  --sn-space-5: 24px;
  --sn-space-6: 32px;
  --sn-space-8: 48px;
  --sn-space-10: 64px;
  --sn-space-12: 96px;
}

/* ============================================================
   BASE / SEMANTIC ELEMENT STYLES
   ============================================================ */
.sn-root {
  font-family: var(--sn-font);
  color: var(--sn-fg);
  font-size: var(--sn-body);
  line-height: var(--sn-lh-body);
  -webkit-font-smoothing: antialiased;
}

.sn-h1 {
  font-size: var(--sn-h1);
  font-weight: var(--sn-w-extrabold);
  line-height: var(--sn-lh-tight);
  color: var(--sn-blue);
  letter-spacing: -0.01em;
}
.sn-h2 {
  font-size: var(--sn-h2);
  font-weight: var(--sn-w-extrabold);
  line-height: 1.2;
  color: var(--sn-blue);
}
.sn-h3 {
  font-size: var(--sn-h3);
  font-weight: var(--sn-w-bold);
  color: var(--sn-blue-light);
}
.sn-eyebrow {
  font-size: var(--sn-eyebrow-size);
  font-weight: var(--sn-w-bold);
  color: var(--sn-green);
  text-transform: none;
}
.sn-body { font-size: var(--sn-body); line-height: var(--sn-lh-body); color: var(--sn-ink); }
.sn-link { color: var(--sn-link); text-decoration: none; }
.sn-link:hover { text-decoration: underline; }

/* Highlighted inline text (green) used inside testimonials/headlines */
.sn-highlight { color: var(--sn-green); font-weight: var(--sn-w-bold); }