/* ═══════════════════════════════════════════════════════════════
   FIRST STEPS DEVELOPMENTAL SERVICES — DESIGN TOKEN ROOT
   Approved: 2026-10-02
   Colours:  Elementor global palette, confirmed by Jarrod Scalzo
   Type / spacing / radii: FSDS design system (Early Insights)
   Source of truth: _notes/DESIGN_TOKENS.md
═══════════════════════════════════════════════════════════════ */

:root {

  /* ────────────────────────────────────────────
     CLIENT PALETTE — exact values, do not alter
  ──────────────────────────────────────────── */
  --clr-teal:   #74A4AA;   /* primary brand */
  --clr-blue:   #4276AD;   /* secondary brand */
  --clr-ink:    #092327;   /* near-black — text and dark backgrounds */
  --clr-white:  #FFFFFF;
  --clr-black:  #000000;
  --clr-beige:  #F4EFE3;   /* hero sections, footer, warm neutrals */
  --clr-red:    #d32f2f;   /* alert / status indicator */
  --clr-yellow: #efe5aa;   /* warm accent — marquee band */

  /* ────────────────────────────────────────────
     DERIVED: teal tints and shades
     Method: palette colour × 0.85 brightness (dark);
             mixed with white at named percentages (light)
  ──────────────────────────────────────────── */
  --clr-teal-dark:  #638B91;   /* ×0.85 — button hover, heading accents */
  --clr-teal-mid:   #CEDFE1;   /* +white 65% — borders, card accents */
  --clr-teal-pale:  #F4F8F8;   /* +white 92% — alternating section backgrounds */

  /* ────────────────────────────────────────────
     DERIVED: blue tints and shades
  ──────────────────────────────────────────── */
  --clr-blue-dark:  #386493;   /* ×0.85 — secondary button hover */

  /* ────────────────────────────────────────────
     DERIVED: ink tints
  ──────────────────────────────────────────── */
  --clr-ink-muted:  #536568;   /* +white 30% — secondary and muted text */

  /* ────────────────────────────────────────────
     SEMANTIC: colour roles
  ──────────────────────────────────────────── */

  /* Primary — teal */
  --primary:       #74A4AA;
  --primary-dark:  #638B91;
  --primary-mid:   #CEDFE1;
  --primary-pale:  #F4F8F8;

  /* Secondary — blue */
  --secondary:      #4276AD;
  --secondary-dark: #386493;

  /* Text */
  --text-heading:  #092327;   /* H1–H3 */
  --text-body:     #092327;   /* body paragraphs — full ink */
  --text-muted:    #536568;   /* labels, captions, secondary info */
  --text-on-dark:  #FFFFFF;   /* text on dark CTA and primary-colour backgrounds */

  /* Backgrounds */
  --bg-page:     #FFFFFF;    /* default page background */
  --bg-section:  #F4F8F8;   /* alternating even sections */
  --bg-hero:     #F4EFE3;   /* hero sections */
  --bg-footer:   #F4EFE3;   /* footer */
  --bg-cta:      #092327;   /* dark CTA sections */
  --bg-notice:   #d9edf7;   /* info panel — hero notice */
  --bg-header:   var(--clr-white);   /* white — 2026-10-15 */

  /* Borders */
  --border:       #CEDFE1;   /* card borders, dividers */
  --border-focus: #4276AD;   /* form field focus ring */

  /* Shadows — keyed to ink colour */
  --shadow:           0 2px 16px rgba(9, 35, 39, 0.08);
  --shadow-md:        0 4px 24px rgba(9, 35, 39, 0.13);
  --shadow-xs:        0 1px 6px  rgba(9, 35, 39, 0.07);   /* header */
  --shadow-btn:       0 2px 10px rgba(9, 35, 39, 0.2);    /* button rest */
  --shadow-btn-hover: 0 4px 14px rgba(9, 35, 39, 0.22);   /* button hover */
  --shadow-nav:      -4px 0 24px rgba(9, 35, 39, 0.15);   /* mobile nav drawer */

  /* On-teal text and overlays */
  --text-on-teal:     rgba(255, 255, 255, 0.85);   /* body copy on teal */
  --text-on-teal-hi:  rgba(255, 255, 255, 0.92);   /* sub text on teal */
  --overlay-white-sm: rgba(255, 255, 255, 0.08);   /* decorative circle */
  --overlay-white-md: rgba(255, 255, 255, 0.22);   /* hover fill */

  /* ────────────────────────────────────────────
     TYPOGRAPHY
  ──────────────────────────────────────────── */

  --font-head: 'Nunito', sans-serif;
  --font-body: 'Lato', sans-serif;

  /* Heading scale — fluid, clamped */
  --text-h1: clamp(32px, 5vw, 52px);
  --svc-h1:  clamp(30px, 3.2vw, 42px);   /* service page hero H1 — fits 2–3 lines at 1920px */
  --text-h2: clamp(24px, 3.5vw, 34px);
  --text-h3: clamp(18px, 2.5vw, 22px);
  --text-h4: 13px;   /* always uppercase; see base styles */

  /* Heading weights */
  --weight-h1: 900;
  --weight-h2: 800;
  --weight-h3: 700;
  --weight-h4: 900;

  /* Body scale */
  --text-base:  16px;
  --text-sm:    15px;
  --text-xs:    14px;
  --text-2xs:   13px;
  --text-label: 11px;   /* eyebrow labels, H4 sub-labels */

  /* Line heights */
  --leading-body:    1.7;
  --leading-heading: 1.2;
  --leading-loose:   1.8;   /* hero lead paragraphs */

  /* ────────────────────────────────────────────
     SPACING
  ──────────────────────────────────────────── */

  /* Section vertical padding */
  --section-pad:     100px;   /* desktop default */
  --section-pad-md:   72px;   /* ≤ 900px */
  --section-pad-sm:   56px;   /* ≤ 600px */

  /* Content container */
  --container-max:  1160px;
  --container-pad:    64px;   /* horizontal, desktop */
  --container-pad-sm: 24px;   /* horizontal, 601–1024px */
  --gutter-mobile:    20px;   /* horizontal, ≤ 768px — applied via :root override below */

  /* Grid gaps */
  --gap-2:     28px;   /* two-column layouts */
  --gap-3:     24px;   /* three- and four-column layouts */
  --gap-split: 80px;   /* image + text split (→ 48px at ≤ 900px) */
  --gap-card:  20px;   /* tight card grids */

  /* Component padding */
  --pad-card:  36px 32px;
  --pad-btn:   13px 28px;

  /* ────────────────────────────────────────────
     RADII — 16px on all buttons, 10px on cards; 4px on header controls only
  ──────────────────────────────────────────── */

  --radius:        10px;   /* cards, FAQ items, form fields */
  --radius-lg:     16px;   /* all buttons and highlight panels */
  --radius-pill:   40px;   /* badges and geo-tag pills */
  --radius-header:  4px;   /* header controls only — nav link borders, header CTA; exception to 16px button rule */

  /* ────────────────────────────────────────────
     SERVICE-PAGE PALETTE — from live design, approved by client
     Decision: Maida 2026-10-06; do not alter
     Near-match pairs listed in DESIGN_TOKENS.md
  ──────────────────────────────────────────── */
  --svc-primary:       #417aaf;
  --svc-primary-dark:  #2d5a87;
  --svc-primary-deep:  #1d3d5e;
  --svc-secondary:     #afdee8;
  --svc-light-accent:  #c5dfe6;
  --svc-highlight:     #efe5aa;   /* identical to --clr-yellow */
  --svc-highlight-mid: #e8d98a;
  --svc-text-dark:     #1a2b3c;
  --svc-text-body:     #3d4f5e;
  --svc-text-muted:    #6a7f90;
  --svc-border:        #d4e8ed;
  --svc-bg-section:    #f4fafc;

}

/* ────────────────────────────────────────────
   MOBILE GUTTER — redefine --container-pad at ≤768px.
   Every rule that uses var(--container-pad) for padding
   automatically gets 20px on phones without any page CSS change.
──────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --container-pad: var(--gutter-mobile);
  }
}