/* ============================================================
   TOKENS — the single source of truth for the visual system.
   Every color, font size, and spacing value the site uses is
   defined here. Change a value here and it changes everywhere.

   Colors were sampled from the 11 Point Partners logo mark.
   Type: Source Serif 4 (headlines) + Inter (everything else).
   ============================================================ */

:root {
  /* ---- Brand colors (from the "11pt Brand" Figma collection) ---- */
  --deep:     #0F2A38;  /* dark navy — dark section backgrounds, buttons */
  --water:    #2F6A84;  /* mid blue — links, accents, timeline nodes */
  --river:    #BAD9E5;  /* light blue from the logo — text on dark, spine */
  --mist:     #EDF5F9;  /* palest blue — light section backgrounds, inputs */
  --bone:     #F7F4EE;  /* warm off-white — alternate section background */
  --white:    #FFFFFF;
  --ink:      #16232B;  /* near-black — headlines, body on light */
  --slate:    #5A6B76;  /* gray-blue — secondary text */
  --hairline: #DCE6EC;  /* borders and dividers */
  --alert:    #A23E31;  /* muted brick — the only "something went wrong" color */

  /* ---- Font families (self-hosted, see assets/fonts/) ---- */
  --font-serif: 'Source Serif 4', Georgia, serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Type scale ----
     Fluid: each value scales smoothly from the mobile size (390px
     design) up to the desktop size (1440px design), then stops. */
  --text-h1:         clamp(34px, 22.9px + 2.857vw, 64px);   /* Display/H1 */
  --text-h1-contact: clamp(38px, 31.3px + 1.714vw, 56px);   /* Contact "Let's talk." */
  --text-h1-hero:    clamp(30px, 21.8px + 2.095vw, 52px);   /* Home hero — a step down from H1 so the
                                                               investor strip fits inside the hero */
  --text-h2:         clamp(27px, 20.7px + 1.619vw, 44px);   /* Display/H2 */
  --text-h3:         clamp(21px, 17.7px + 0.857vw, 30px);   /* Display/H3 */
  --text-numeral:    clamp(28px, 25.8px + 0.571vw, 34px);   /* step numbers 01–04 */
  --text-lead:       clamp(17px, 15.9px + 0.286vw, 20px);   /* Body/Lead — hero subhead */
  --text-base:       clamp(16px, 15.6px + 0.095vw, 17px);   /* Body/Base — body copy */
  --text-small:      clamp(14px, 13.6px + 0.095vw, 15px);   /* Body/Small */
  --text-card-title: clamp(17px, 15.9px + 0.286vw, 20px);   /* UI/Card title */
  --text-button:     clamp(15px, 14.6px + 0.095vw, 16px);   /* UI/Button */
  --text-label:      13px;                                  /* UI/Label — form labels, captions */
  --text-legal:      13px;                                  /* copyright line */
  --text-wordmark:   clamp(15px, 13.5px + 0.381vw, 19px);   /* nav wordmark */

  /* ---- Line heights ---- */
  --leading-h1:     1.06;
  --leading-h2:     1.15;
  --leading-h3:     1.25;
  --leading-lead:   1.62;
  --leading-base:   1.68;
  --leading-small:  1.6;
  --leading-title:  1.32;

  /* ---- Letter spacing ---- */
  --tracking-h1:       -1.5px;
  --tracking-h2:       -0.8px;
  --tracking-h3:       -0.4px;
  --tracking-title:    -0.1px;
  --tracking-button:    0.2px;
  --tracking-label:     0.6px;
  --tracking-wordmark:  2.4px;

  /* ---- Layout ---- */
  --content-max: 1248px;                            /* content never stretches wider */
  --gutter:      clamp(24px, -2.7px + 6.857vw, 96px); /* 24 mobile / ~48 tablet / 96 desktop */
  --section-pad: clamp(64px, 43.2px + 5.333vw, 120px); /* vertical section padding */
  --nav-height:  clamp(64px, 55.1px + 2.286vw, 88px);

  /* ---- Shape & elevation ---- */
  --radius: 4px;                                    /* one radius, used everywhere */
  --shadow-card: 0 8px 24px rgba(15, 41, 56, 0.06);
  --shadow-nav:  0 1px 12px rgba(15, 41, 56, 0.07);  /* sticky nav, once the page scrolls under it */

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-duration: 0.7s;
  --marquee-duration: 36s;                          /* one full loop of the investor logos */
}