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

:root {
  /* ===== PRIMARY — the logo gradient (brandbook p.6) ===== */
  --so-pink:        #D7307B;
  --so-purple:      #A84A95;
  --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;
  --so-muted:       #6b7a8d;
  --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", "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;
}