/* ============================================================
   BOS❤️™ — Brand Design Tokens
   Built from the live caldwellleadership.com (Webflow) design system.
   Variable names/values mirror the site's source variables so BOS,
   caldwellleadership.com, and Figma stay in lockstep.
   Import this first; never hardcode values that exist here.
   ============================================================ */

/* ---- Self-hosted brand fonts ---- */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/Plus_Jakarta_Sans/PlusJakartaSans-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi_Complete/Fonts/WEB/fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900; font-style: normal; font-display: swap;
}

:root {
  /* ---- Canonical palette (exact source variables from caldwellleadership.com) ---- */
  --cl-light:  #f9f9f9;  /* primary light surface (NOT pure white) */
  --cl-dark:   #1a1d1a;  /* warm near-black */
  --cl-red:    #dc1600;  /* dominant brand active */
  --cl-yellow: #fbd101;  /* marigold accent / light-source */
  --cl-purple: #120344;  /* indigo-navy depth anchor */

  /* line / hairline tokens (from site) */
  --line-on-light: #e0e0e0;
  --line-on-dark:  #383838;
  --line-width: 1px;

  /* ---- Surfaces & ink ---- */
  /* Light context (light sections) */
  --surface-light:   var(--cl-light);
  --ink-on-light:    var(--cl-dark);
  --card-on-light:   rgba(26, 29, 26, 0.03);   /* site card tint on light */
  --card-on-light-2: rgba(26, 29, 26, 0.06);

  /* Dark context (this coming-soon page) */
  --surface-base: #141613;            /* derived depth floor, just below --cl-dark */
  --surface-1:    var(--cl-dark);
  --surface-card: rgba(249, 249, 249, 0.035);
  --ink:          var(--cl-light);    /* text on dark = brand light, not #fff */
  --ink-muted:    rgba(249, 249, 249, 0.78);
  --ink-faint:    rgba(249, 249, 249, 0.56);
  --hairline:        rgba(249, 249, 249, 0.12);  /* site hairline-on-dark */
  --hairline-strong: rgba(249, 249, 249, 0.18);

  /* ---- Brand typefaces (loaded on the live site) ---- */
  --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body:    "Satoshi", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Heading weight on the site is Regular (400) — the brand's light register */
  --weight-display: 400;
  --weight-body: 400;
  --weight-medium: 500;

  /* gradient as type fill (signature emphasis move) */
  --grad-type: linear-gradient(105deg, var(--cl-yellow) 0%, var(--cl-red) 72%);

  /* ---- Type scale (anchored to live px: 14 / 16 / 19.2 / 28.8 / 38.4 / 56 / 89.6) ---- */
  --text-xs:   clamp(0.78rem, 0.74rem + 0.2vw, 0.85rem);   /* ~13.6px labels */
  --text-sm:   0.875rem;                                    /* 14px */
  --text-base: 1rem;                                        /* 16px */
  --text-lg:   clamp(1.06rem, 1rem + 0.5vw, 1.2rem);        /* ~19.2px body-large */
  --text-xl:   clamp(1.35rem, 1.1rem + 1.2vw, 1.8rem);      /* ~28.8px h3 */
  --text-2xl:  clamp(1.7rem, 1.2rem + 2.4vw, 2.4rem);       /* ~38.4px h2 */
  --text-3xl:  clamp(2.1rem, 1.4rem + 3.4vw, 3.5rem);       /* 56px h1 */
  --text-display: clamp(2.6rem, 1.2rem + 6.6vw, 5.6rem);    /* ~89.6px display */

  /* line-height: site uses ~1.1 on headings, ~1.4 on body */
  --leading-tight: 1.1;
  --leading-snug: 1.15;
  --leading-body: 1.4;

  /* tracking: site uses ~ -0.02em headings, ~ -0.01em body */
  --tracking-tight: -0.02em;
  --tracking-body: -0.01em;
  --tracking-wide: 0.26em;

  /* ---- Radius (site uses 4px primary, 6px) ---- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 999px;

  /* ---- Spacing scale (8-pt; section rhythm to ~96px like the site) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --section-y: clamp(3.5rem, 2rem + 7vw, 6rem);   /* ~64–96px like the site */

  /* ---- Motion grammar (cinematic, editorial register) ---- */
  --ease-brand: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 0.2s;
  --dur-2: 0.45s;
  --dur-3: 0.7s;
  --dur-4: 1s;
  --reveal-distance: 28px;
  --stagger: 0.09s;

  /* ---- Layout ---- */
  --maxw: 1400px;  /* matches the caldwellleadership.com container width */
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);
}

@media (prefers-reduced-motion: reduce) {
  :root { --reveal-distance: 0px; --stagger: 0s; --dur-2: 0.001s; --dur-3: 0.001s; --dur-4: 0.001s; }
}