/* ============================================================
   CAPE — Design Tokens
   Colors, typography, sizing, easing, durations
   ============================================================ */

:root {
  /* ---------- COLOR ---------- */
  --color-off-white: #f5eddc;     /* primary background, cream / "oat" */
  --color-slate-black: #141414;   /* primary text and bold accents */
  --color-yves-klein: #201bb8;    /* accent color */

  /* Tan invert used in carousel thumbs */
  --color-tan: #d4cdb8;

  /* ---------- TYPOGRAPHY FAMILIES ---------- */
  --font-body: "coolvetica", "Helvetica Neue", Arial, sans-serif;
  --font-script: "rizado-script", "Brush Script MT", cursive;

  /* ---------- TYPE SIZE TOKENS ----------
     Display tokens were scaled to 80% of their original values
     (15-20% smaller) so the layout breathes more. Body tokens
     are untouched. */
  --type-hero-cape: clamp(132px, 19.2vw, 252px);        /* CAPE wordmark in hero (reduced 25%) */
  --type-hero-supporting: clamp(22px, 2.9vw, 45px);     /* "is a global experiential..." */
  --type-display-headline: clamp(64px, 8vw, 144px);     /* Section 02 + Section 03 main headlines */
  --type-section-title: clamp(144px, 17.6vw, 256px);    /* WORK title (mask wipe) */
  --type-display-closer: clamp(40px, 5vw, 80px);        /* "In the world." (rebalanced) */
  --type-cta-script: clamp(112px, 14.4vw, 224px);       /* "Let's fly" Rizado */
  --type-cta-arrow: clamp(64px, 8.8vw, 112px);          /* Arrow next to "Let's fly" */
  --type-cta-lead: clamp(18px, 1.92vw, 32px);           /* "If you're ready..." lead */
  --type-body-large: clamp(22px, 1.9vw, 30px);          /* main body paragraphs (bumped 25%) */
  --type-body-medium: clamp(20px, 1.8vw, 32px);         /* Section 4 opener — bumped up to feel connected to "in the world." */
  --type-accent-uppercase: clamp(20px, 2.2vw, 32px);    /* Strategy. Creative... block (bumped) */
  --type-eyebrow: clamp(11px, 0.9vw, 14px);             /* tile eyebrows, nav */

  /* ---------- EASINGS ---------- */
  --ease-out-quint: cubic-bezier(0.2, 0.85, 0.25, 1);
  --ease-mask-wipe: cubic-bezier(0.7, 0, 0.25, 1);

  /* ---------- LAYOUT ---------- */
  --nav-height: 56px;
  --page-gutter: 30px;
}