/* ============================================================
   STANDING OAK ADVISORS — Design Tokens (website port)
   Ported from Marketing/design-system/colors_and_type.css (the
   canonical source of truth — Brandbook 2021). Only change vs.
   canonical: @font-face src paths point at /fonts/ (site root).
   DO extend in styles.css; do NOT redefine the brand here.
   ============================================================ */

/* ---------- Webfonts ---------- */
/* KoHo — primary display / headline typeface (brand-mandated).
   Open Sans — secondary body typeface (loaded from Google Fonts in the layout). */
@font-face {
  font-family: "KoHo";
  src: url("/fonts/KoHo-ExtraLight.ttf") format("truetype");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "KoHo";
  src: url("/fonts/KoHo-ExtraLightItalic.ttf") format("truetype");
  font-weight: 200; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "KoHo";
  src: url("/fonts/KoHo-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "KoHo";
  src: url("/fonts/KoHo-LightItalic.ttf") format("truetype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "KoHo";
  src: url("/fonts/KoHo-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "KoHo";
  src: url("/fonts/KoHo-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "KoHo";
  src: url("/fonts/KoHo-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "KoHo";
  src: url("/fonts/KoHo-MediumItalic.ttf") format("truetype");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "KoHo";
  src: url("/fonts/KoHo-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "KoHo";
  src: url("/fonts/KoHo-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "KoHo";
  src: url("/fonts/KoHo-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "KoHo";
  src: url("/fonts/KoHo-BoldItalic.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}
/* Helvetica — included in the brand kit (legacy collateral / letterhead). */
@font-face {
  font-family: "Helvetica Neue Brand";
  src: url("/fonts/Helvetica.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* Metric-matched fallback for Open Sans, added 2026-08-12.
   Open Sans loads from Google Fonts with display=swap, so text first paints in
   Arial and then re-flows when the real font arrives. On the homepage that reflow
   was the ENTIRE remaining layout shift: the paragraph under the hero headline
   moved, and nothing else on the page did.
   size-adjust and the override properties make Arial occupy almost exactly the
   space Open Sans will, so the swap becomes invisible instead of shoving the page
   around. This changes no final rendering: once Open Sans arrives it is used
   normally. It only affects the few hundred milliseconds before that. */
@font-face {
  font-family: "Open Sans Fallback";
  src: local("Arial");
  size-adjust: 106.5%;
  ascent-override: 101%;
  descent-override: 28%;
  line-gap-override: 0%;
}

:root {
  /* ===== PRIMARY — the logo gradient (brandbook p.6) ===== */
  --so-pink:        #D7307B;
  --so-purple:      #A84A95;
  /* TEXT-ONLY variant of the brand pink, added 2026-08-12.
     --so-pink itself is the LOGO GRADIENT colour and is deliberately untouched:
     darkening it would change the brand everywhere, which is a brand decision and
     not an accessibility one. Large decorative areas do not need 4.5:1.
     Small text does, and #D7307B only manages 4.25:1 on the page tint. So links
     and small labels use this darker variant (5.07:1 on tint, 5.47:1 on white)
     while gradients, borders and fills keep the true brand pink.
     The subtle failure this fixes: #D7307B PASSES on white and FAILS on the tint,
     so whether a link was compliant depended on what happened to be behind it. */
  --so-pink-text:   #c22a6f;
  --so-gradient:    linear-gradient(135deg, var(--so-pink), var(--so-purple));
  --so-gradient-h:  linear-gradient(90deg,  var(--so-pink), var(--so-purple));

  /* ===== BRAND ACCENTS — complementary (brandbook p.7) ===== */
  --so-magenta:     #FF00E6;   /* hot accent — sparing use only */
  --so-teal:        #57B7D2;
  --so-cyan:        #6CECF4;
  --so-teal-grad:   linear-gradient(135deg, var(--so-teal), var(--so-cyan));

  /* ===== SECONDARY — backgrounds & text (brandbook p.8) ===== */
  --so-navy:        #18314F;
  --so-steel:       #397687;
  --so-gray:        #414141;

  /* ===== NEUTRALS (derived, harmonised to the navy) ===== */
  --so-ink:         #18314F;
  --so-ink-soft:    #414141;
  /* Was #6b7a8d until 2026-08-12. That failed WCAG AA on BOTH backgrounds
     (4.38:1 on white, 4.08:1 on the page tint, against a 4.5:1 requirement), so
     every piece of secondary text on the site was below standard. Darkened to
     clear it: 5.31:1 on white, 5.07:1 on tint. See perf-a11y-baseline-2026-08-12. */
  --so-muted:       #5c6b7d;
  --so-line:        #e4e1ea;
  --so-surface:     #ffffff;
  --so-bg:          #f8f6fa;
  --so-bg-tint:     #f1edf5;

  /* ===== SAVVY co-brand (platform partner) ===== */
  --savvy-black:    #000000;
  --savvy-white:    #ffffff;

  /* ===== SEMANTIC TYPE TOKENS ===== */
  --font-display:   "KoHo", "Trebuchet MS", sans-serif;
  --font-body:      "Open Sans", "Open Sans Fallback", "Helvetica Neue", Arial, sans-serif;

  /* Type scale — display is KoHo. Body floored at 16px per brandbook. */
  --t-display:  700 3.25rem/1.08 var(--font-display);
  --t-h1:       600 2.5rem/1.12  var(--font-display);
  --t-h2:       600 1.875rem/1.18 var(--font-display);
  --t-h3:       600 1.3rem/1.25  var(--font-display);
  --t-eyebrow:  600 0.8rem/1.2   var(--font-display);
  --t-body:     300 1.0625rem/1.6 var(--font-body);
  --t-body-strong: 600 1.0625rem/1.6 var(--font-body);
  --t-small:    300 0.9375rem/1.55 var(--font-body);
  --t-caption:  400 0.8125rem/1.4 var(--font-body);

  /* ===== RADII ===== (soft, matching the logo's rounded leaf lobes) */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* ===== ELEVATION ===== (cool navy-tinted shadows, never neutral gray) */
  --shadow-sm:  0 1px 3px rgba(24,49,79,.06);
  --shadow-md:  0 2px 16px rgba(24,49,79,.07);
  --shadow-lg:  0 12px 40px rgba(24,49,79,.12);
  --shadow-pink: 0 10px 30px rgba(215,48,123,.22);

  /* ===== 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;
}