/* ============================================================
   SipaBoards — Colors & Type Foundations
   Self-host fonts; ITC Avant Garde Std (headings) + RNS Sanz (body)
   ============================================================ */

/* Fonts (@font-face) are registered in functions.php with the correct theme path,
   preloaded + font-display:optional. The old root-relative /fonts/ rules were removed
   (they 404'd → "Failed to decode font / invalid sfntVersion" console errors). */

:root {
  /* ============== COLOR — Brand ============== */
  --teal:        #00C4B3;   /* primary brand — CTAs, links, accents */
  --teal-hover:  #00A89F;   /* hover / pressed CTA */
  --teal-tint:   #E6FAF8;   /* faint teal wash for soft fills/badges */
  --teal-deep:   #007F77;   /* text-on-light teal where contrast needed */

  /* ============== COLOR — Ink & Neutrals ============== */
  --ink:        #2E2E2E;    /* primary text */
  --muted:      #777777;    /* secondary text, captions */
  --hairline:   #E5E7EB;    /* borders, dividers */
  --bg:         #FFFFFF;    /* page background */
  --bg-soft:    #F6F8F8;    /* alternating sections, cards */
  --ink-deep:   #1B1B1B;    /* near-black for dark sections / photo overlays */

  /* ============== COLOR — Semantic ============== */
  --fg-1:       var(--ink);
  --fg-2:       var(--muted);
  --fg-invert:  #FFFFFF;
  --link:       var(--teal);
  --link-hover: var(--teal-hover);
  --success:    #1FA97E;
  --warning:    #E8A53D;
  --danger:     #D8553F;
  --focus-ring: rgba(0,196,179,0.45);

  /* ============== TYPE — Families ============== */
  --font-display: "Avant Garde", "Century Gothic", "Futura", sans-serif;
  --font-body:    "RNS Sanz", "Helvetica Neue", Arial, sans-serif;

  /* ============== TYPE — Scale (mobile-first, large) ============== */
  --fs-display: clamp(2.6rem, 6vw, 4.5rem);  /* hero */
  --fs-h1:      clamp(2.1rem, 4.5vw, 3.25rem);
  --fs-h2:      clamp(1.65rem, 3vw, 2.4rem);
  --fs-h3:      clamp(1.3rem, 2vw, 1.6rem);
  --fs-h4:      1.15rem;
  --fs-lead:    clamp(1.1rem, 1.6vw, 1.3rem);
  --fs-body:    1.0625rem;   /* 17px */
  --fs-small:   0.9375rem;   /* 15px */
  --fs-eyebrow: 0.8125rem;   /* 13px — uppercase label */

  /* ============== TYPE — Weights ============== */
  --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700;

  /* ============== TYPE — Leading & Tracking ============== */
  --lh-tight: 1.04;
  --lh-snug:  1.18;
  --lh-body:  1.6;
  --tracking-display: -0.02em;
  --tracking-eyebrow: 0.14em;

  /* ============== SPACING (8px base) ============== */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 48px);

  /* ============== RADII ============== */
  --r-sm: 8px;     /* buttons, inputs, small cards */
  --r-md: 14px;    /* cards */
  --r-lg: 22px;    /* feature panels, media */
  --r-pill: 999px; /* pill buttons, chips */

  /* ============== SHADOWS / ELEVATION ============== */
  --shadow-xs: 0 1px 2px rgba(46,46,46,0.06);
  --shadow-sm: 0 2px 8px rgba(46,46,46,0.07);
  --shadow-md: 0 10px 30px rgba(46,46,46,0.09);
  --shadow-lg: 0 24px 60px rgba(46,46,46,0.12);
  --shadow-teal: 0 12px 28px rgba(0,196,179,0.28);

  /* ============== MOTION ============== */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 420ms;
}

/* ============================================================
   SEMANTIC TYPE — apply to elements
   ============================================================ */
.sb-display {
  font-family: var(--font-display); font-weight: var(--w-bold);
  font-size: var(--fs-display); line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display); color: var(--ink); text-wrap: balance;
}
h1, .sb-h1 {
  font-family: var(--font-display); font-weight: var(--w-bold);
  font-size: var(--fs-h1); line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display); color: var(--ink); text-wrap: balance;
}
h2, .sb-h2 {
  font-family: var(--font-display); font-weight: var(--w-semibold);
  font-size: var(--fs-h2); line-height: var(--lh-snug);
  letter-spacing: -0.01em; color: var(--ink); text-wrap: balance;
}
h3, .sb-h3 {
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--ink);
}
h4, .sb-h4 {
  font-family: var(--font-display); font-weight: var(--w-semibold);
  font-size: var(--fs-h4); line-height: 1.3; color: var(--ink);
}
.sb-lead {
  font-family: var(--font-body); font-weight: var(--w-regular);
  font-size: var(--fs-lead); line-height: 1.45; color: var(--muted);
}
body, p, .sb-body {
  font-family: var(--font-body); font-weight: var(--w-regular);
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink);
}
.sb-small { font-size: var(--fs-small); color: var(--muted); line-height: 1.5; }
.sb-eyebrow {
  font-family: var(--font-body); font-weight: var(--w-semibold);
  font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--teal-deep);
}
a, .sb-link { color: var(--link); text-decoration: none; }
a:hover, .sb-link:hover { color: var(--link-hover); }