/* ==========================================================================
   O&co design tokens
   Source: BRAND/01_brand-guidelines/O&co BG v.4.docx + WIREFRAMES/ (v.2 9_11)
   Every page draws color, type, and spacing from here — don't redefine locally.
   ========================================================================== */

:root {
  /* ---- Palette (Brand Guidelines v.4 §3) ---- */
  --off-black:     #1A1A1A;  /* primary dark: text, dark backgrounds, headlines */
  --cornell-red:   #B31B1B;  /* action: CTAs, key highlights, stats */
  --turquoise:     #40C4B4;  /* editorial accent: identifiers, rules, ampersands */
  --silver-grey:   #A6A6A6;  /* secondary type, borders, captions */
  --platinum-grey: #E6E6E6;  /* subtle backgrounds, section separation */
  --light-grey:    #F1F1F1;  /* intermediate step between Platinum and Off White
                                (approved from wireframes; pending addition to BG) */
  --off-white:     #F8F8F8;  /* primary light background */

  /* Tints used by the wireframes for low-contrast graphic detail on dark
     grounds (hero mark, outer rings, rules). Off White at reduced opacity —
     not new colors. */
  --on-dark-rule:   rgb(248 248 248 / 0.16);
  --on-dark-ghost:  rgb(248 248 248 / 0.14);
  --on-red-ghost:   rgb(248 248 248 / 0.16);
  --dark-rule:      #3A3A3A;  /* hero meta rule (WIREFRAMES/handoff 2 addendum) */

  /* ---- Type families (Brand Guidelines v.4 §2) ---- */
  --font-display: "Play", "Arial Narrow", Arial, sans-serif;           /* headlines */
  --font-accent:  "Dancing Script", "Brush Script MT", cursive;       /* rare accents */
  --font-body:    "Montserrat", "Helvetica Neue", Arial, sans-serif;  /* everything else */

  /* ---- Type scale (fluid; max values match the 1440px wireframe) ---- */
  --fs-display:   clamp(2.25rem, 4.4vw, 4rem);        /* FAQ / Ways-to-Work titles */
  --fs-h2:        clamp(1.75rem, 3.4vw, 3.125rem);    /* row headlines */
  --fs-numeral:   clamp(2.75rem, 5vw, 4.5rem);        /* large row numerals */
  --fs-h3:        clamp(1.375rem, 2vw, 1.875rem);     /* Mission / Vision / card titles */
  --fs-lead:      clamp(1.125rem, 0.9rem + 0.8vw, 1.625rem);
  --fs-body:      clamp(1.0625rem, 0.875rem + 0.7vw, 1.5rem);
  --fs-small:     clamp(1rem, 0.85rem + 0.4vw, 1.25rem);
  --fs-label:     clamp(0.75rem, 0.65rem + 0.3vw, 1rem);   /* spaced-caps utility */
  --fs-script-xl: clamp(2.75rem, 7vw, 7rem);          /* CTA "Storytelling That Sells" */
  --fs-script:    clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem);

  --lh-head:  1.15;
  --lh-body:  1.8;

  --ls-label: 0.3em;   /* section labels, eyebrows */
  --ls-nav:   0.2em;
  --ls-meta:  0.15em;

  /* ---- Layout ---- */
  --content-max: 1296px;                 /* 72px gutters at 1440 */
  --gutter:      clamp(1.25rem, 5vw, 4.5rem);
  --label-col:   24%;                    /* left label column in 2-col rows */
  --space-xs:    0.5rem;
  --space-s:     1rem;
  --space-m:     clamp(1.5rem, 3vw, 2.5rem);
  --space-l:     clamp(2.5rem, 5vw, 4.5rem);
  --space-xl:    clamp(4rem, 8vw, 7.5rem);   /* section padding */

  /* ---- Lines ---- */
  --rule-heavy: 2px;
  --rule-thin:  1.5px;
  --ring:       1.5px;

  /* ---- Motion ---- */
  --ease-cta: cubic-bezier(0.2, 0.7, 0.2, 1);  /* CTA button + Explore link (handoff-cta) */
}