/* ============================================================
   tokens.css — V4 design system
   Source: Prospero Brand Manual (April 2021) + design reference
   ============================================================ */

:root {
  /* ── Brand palette ── */
  --red:         #E42C2F;   /* Prospero Rot — primary accent */
  --red-hover:   #c2191c;
  --red-soft:    rgba(228, 44, 47, 0.08);
  --dark:        #121212;   /* Near-black — hero, dark sections */
  --dark-2:      #0a0a0a;   /* Footer bg */
  --off-white:   #F0EEEA;   /* Page bg — Brand Manual "slide background" */
  --white:       #FFFFFF;   /* Card bg, stats sections, trust bar */
  --text:        #404040;   /* Body copy */
  --border:      #e0ddd8;   /* Hairlines */

  /* Secondary — graphics / disruptors only */
  --blue:        #4C5BB8;
  --green:       #64DE95;
  --lightblue:   #8BE4FF;
  --amber:       #F59E0B;

  /* ── Typography ── */
  --font: 'MessinaSans', Arial, sans-serif;

  --fw-light:    300;
  --fw-book:     350;
  --fw-regular:  400;
  --fw-semi:     600;
  --fw-bold:     700;
  --fw-black:    900;

  /* Fluid type scale — Brand Manual pt values adapted for screen */
  --text-display:  clamp(2.5rem,  5vw,   4.25rem);   /* hero h1 */
  --text-h2:       clamp(1.75rem, 3.5vw, 3rem);
  --text-h3:       clamp(1.25rem, 2vw,   1.625rem);
  --text-h4:       0.875rem;
  --text-body-lg:  1.0625rem;                         /* 17px */
  --text-body:     1rem;                              /* 16px */
  --text-sm:       0.8125rem;                         /* 13px */
  --text-xs:       0.6875rem;                         /* 11px */
  --text-label:    0.625rem;                          /* 10px — eyebrows */

  --lh-tight:   1.04;
  --lh-snug:    1.1;
  --lh-normal:  1.3;
  --lh-body:    1.6;
  --lh-loose:   1.65;

  --ls-tight:   -0.02em;
  --ls-normal:  0em;
  --ls-wide:    0.04em;
  --ls-wider:   0.08em;
  --ls-widest:  0.14em;

  /* ── Spacing — 4px base ── */
  --sp-1:  0.25rem;   /* 4px */
  --sp-2:  0.5rem;    /* 8px */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.5rem;    /* 24px */
  --sp-6:  2rem;      /* 32px */
  --sp-7:  3rem;      /* 48px */
  --sp-8:  4rem;      /* 64px */
  --sp-9:  6rem;      /* 96px */
  --sp-10: 8rem;      /* 128px */

  /* ── Layout ── */
  --nav-h:        68px;
  --container:    1100px;
  --section-px:   clamp(1.5rem, 4vw, 3rem);
  --section-py:   clamp(4rem, 8vw, 6.25rem);   /* ~100px at wide */

  /* ── Radii — brand is geometric, nearly sharp ── */
  --r-sm:   2px;
  --r-md:   4px;
  --r-pill: 999px;

  /* ── Shadows ── */
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.10);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.14);
  --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.18);
  --shadow-dark: 0 8px 40px rgba(0, 0, 0, 0.45);
  --shadow-focus: 0 0 0 3px rgba(228, 44, 47, 0.35);

  /* ── Motion ── */
  --ease:        cubic-bezier(0.2, 0, 0, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    120ms;
  --dur-med:     220ms;
  --dur-slow:    400ms;

  /* ── Z-index ── */
  --z-nav:     100;
  --z-overlay: 900;
  --z-modal:   1000;
}