/* ============================================================
   Compass — Design Tokens
   Source of truth: Figma "Website Play"
   • Style sheet frame 58:40  ·  Mock "TEST NEW" 72:173
   • Reference: 1440px viewport / 1280px content / 80px margins
   • Fluid: everything is authored in rem; the root font-size scales
     with the viewport and CAPS at 1600px, so type + spacing + layout
     grow together with the window and stop at 1600.
   Every value below is exact from the MCP (no approximation).
   ============================================================ */

/* ---- Licensed display face: ABC Otto Edu Light ---- */
@font-face { font-family: "ABC Otto Edu"; src: url("../fonts/ABCOttoEdu-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "ABC Otto Edu"; src: url("../fonts/ABCOttoEdu-LightItalic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }

/* ---- Fluid root ----
   1rem = 16px at a 1440px viewport (16 / 1440 = 1.1111vw).
   Caps at 17.78px (the 1600px-viewport value); floors at 14px. */
:root { font-size: clamp(14px, 1.1111vw, 17.78px); }

:root {
  /* ---------- Colour — Primary ---------- */
  --primary-orange:       #FF6215;
  --primary-red:          var(--primary-orange); /* legacy alias */
  --primary-yellow:       #FBB904;
  --primary-blue:         #7695D5;
  --accessible-blue-surface: var(--primary-blue); /* legacy alias */
  --accessible-orange-surface: var(--primary-orange); /* legacy alias */
  --primary-olive:        #65590F;
  --primary-pink:         #FF8198;
  --primary-brown:        #5D3719;
  --primary-violet:       #AC9CF3;
  --secondary-cream:      #FFFEF7;
  --secondary-dark-brown: #2D1512;
  --primary-ink:          var(--secondary-dark-brown); /* legacy surface alias */
  --primary-cream:        var(--secondary-cream); /* legacy background alias */
  --text-black:           #000000;
  --text-white:           #FFFFFF;
  --text-on-orange:       var(--text-black);
  --text-on-yellow:       var(--text-black);
  --text-on-brown:        var(--text-white);
  --text-on-violet:       var(--text-black);
  --text-on-pink:         var(--text-black);
  --text-on-olive:        var(--text-white);
  --text-on-blue:         var(--text-black);
  --text-on-greige:       var(--text-black);
  --text-on-cream:        var(--text-black);
  --text-on-dark-brown:   var(--text-white);
  --primary-greige:       #E8E7E5;
  /* ---------- Colour — Secondary ---------- */
  --secondary-red:        var(--primary-orange); /* retired shade → orange */
  --secondary-orange:     var(--primary-yellow); /* retired alias → yellow */

  /* ---------- Semantic ---------- */
  --color-bg:      var(--primary-cream);
  --color-text:    var(--text-black);
  --color-line:    var(--primary-greige);     /* line = greige */
  --color-border:  var(--primary-ink);
  --color-text-muted:      var(--text-black);
  --color-text-muted-dark: var(--text-white);

  /* ---------- Typography ----------
     Figma note: "Inter (swap for GT America)". Sizes in rem (base 16).
     line-height unitless; letter-spacing in rem so it scales with type. */
  --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Display face (Hero / Age / XL / L). Falls back to the base face if Otto fails to load. */
  --font-family-display: "ABC Otto Edu", var(--font-family-base);
  --fw-regular: 400;  --fw-medium: 500;  --fw-bold: 700;

  /* Hero · 120 / 1.0 / -2 · Otto Light */
  --hero-size: 7.5rem;   --hero-lh: 1;    --hero-ls: -0.125rem;   --hero-weight: 300;
  /* XL · 48 / 1.2 / -1 · Otto Light */
  --xl-size: 3rem;       --xl-lh: 1.2;    --xl-ls: -0.0625rem;    --xl-weight: 300;
  --page-title-size: var(--xl-size); /* standalone page H1s; raised on phones in site.css */
  /* L · 36 / 1.2 / -1 · Otto Light */
  --l-size: 2.25rem;     --l-lh: 1.2;     --l-ls: -0.0625rem;     --l-weight: 300;
  /* Age · 90 / 1.0 / -2 · Otto Light */
  --age-size: 5.625rem;  --age-lh: 1;     --age-ls: -0.125rem;    --age-weight: 300;
  /* Heading · 24 / 1.3 / -0.3 / Bold */
  --heading-size: 1.5rem; --heading-lh: 1.3; --heading-ls: -0.01875rem; --heading-weight: 700;
  /* Body Large · 24 / 1.3 / -0.3 / Regular */
  --body-lg-size: 1.5rem; --body-lg-lh: 1.3; --body-lg-ls: -0.01875rem; --body-lg-weight: 400;
  /* Body · 16 / 1.24 / 0 / Regular */
  --body-size: 1rem;     --body-lh: 1.24; --body-ls: 0;           --body-weight: 400;
  /* Nav / Button · 16 / 1.24 / 0 / Regular */
  --nav-size: 1rem;      --nav-lh: 1.24;  --nav-ls: 0;            --nav-weight: 400;
  /* Small · 14 / 1.2 / 0 / Regular */
  --small-size: 0.875rem; --small-lh: 1.2; --small-ls: 0;         --small-weight: 400;

  /* ---------- Spacing scale (8px base, in rem) ----------
     Use these for ALL gaps/padding so rhythm stays consistent. */
  --space-2xs: 0.5rem;   /* 8  */
  --space-xs:  0.75rem;  /* 12 */
  --space-sm:  1rem;     /* 16 */
  --space-md:  1.5rem;   /* 24 */
  --space-lg:  2.25rem;  /* 36 */
  --space-xl:  3rem;     /* 48 */
  --space-2xl: 4rem;     /* 64 */
  --space-3xl: 5rem;     /* 80 */
  --space-4xl: 7.5rem;   /* 120 */
  --space-5xl: 10rem;    /* 160 */

  --section-y: var(--space-4xl);   /* standard vertical padding between sections (120) */
  --block-gap: var(--space-md);    /* standard gap within a block (24) */

  /* ---------- Layout / grid ----------
     Content 1280 @1440 · 80 margins. The shared frame can grow to 1600px,
     where it caps so content and navigation remain comfortably readable. */
  --page-max:      1600px;
  --gutter:        5rem;     /* 80 @base — side margin, scales with root */
  --grid-columns:  12;
  --grid-gap:      var(--space-md);   /* 24 */

  /* ---------- Radii ---------- */
  --radius-card:     1.875rem;  /* 30 — stage cards, what-we-do cards */
  --radius-panel:    2.5rem;    /* 40 — periwinkle panel */
  --radius-team-img: 1.25rem;   /* 20 */
  --radius-pill:     93.75rem;  /* 1500 — buttons (full pill) */

  /* ---------- Rules / borders ---------- */
  --rule-divider: 1px solid var(--color-line);
  --rule-section: 1px solid var(--color-border);
  --border-control: 0.125rem;   /* 2px — ghost button / tag stroke */
}

/* ============================================================
   Text-style utilities — match Figma text styles 1:1
   ============================================================ */
.t-hero    { font-family: var(--font-family-display); font-weight: var(--hero-weight);    font-size: var(--hero-size);    line-height: var(--hero-lh);    letter-spacing: var(--hero-ls); }
.t-xl      { font-family: var(--font-family-display); font-weight: var(--xl-weight);      font-size: var(--xl-size);      line-height: var(--xl-lh);      letter-spacing: var(--xl-ls); }
.t-l       { font-family: var(--font-family-display); font-weight: var(--l-weight);       font-size: var(--l-size);       line-height: var(--l-lh);       letter-spacing: var(--l-ls); }
.t-age     { font-family: var(--font-family-display); font-weight: var(--age-weight);     font-size: var(--age-size);     line-height: var(--age-lh);     letter-spacing: var(--age-ls); }
.t-heading { font-family: var(--font-family-base); font-weight: var(--heading-weight); font-size: var(--heading-size); line-height: var(--heading-lh); letter-spacing: var(--heading-ls); }
.t-body-lg { font-family: var(--font-family-base); font-weight: var(--body-lg-weight); font-size: var(--body-lg-size); line-height: var(--body-lg-lh); letter-spacing: var(--body-lg-ls); }
.t-body    { font-family: var(--font-family-base); font-weight: var(--body-weight);    font-size: var(--body-size);    line-height: var(--body-lh);    letter-spacing: var(--body-ls); }
.t-nav     { font-family: var(--font-family-base); font-weight: var(--nav-weight);     font-size: var(--nav-size);     line-height: var(--nav-lh);     letter-spacing: var(--nav-ls); }
.t-small   { font-family: var(--font-family-base); font-weight: var(--small-weight);   font-size: var(--small-size);   line-height: var(--small-lh);   letter-spacing: var(--small-ls); }

/* Responsive token overrides from SPA site.css. */
  @media (min-width: 641px) {
  }
  @media (prefers-reduced-motion: no-preference) {
  }

  @media (max-width: 900px) {
  }
  @media (max-width: 900px) {
    :root {
      --hero-size: 3.75rem;
      --xl-size: 2rem;
      --l-size: 1.75rem;
      --age-size: 3.75rem;
      --gutter: 2.5rem;
      --section-y: var(--space-3xl);
    }
  }

  @media (max-width: 560px) {
    :root {
      --hero-size: 2.75rem;
      --xl-size: 1.625rem;
      --page-title-size: 2.5rem;
      --age-size: 3.25rem;
      --heading-size: 1.25rem;
      --body-lg-size: 1.25rem;
      --gutter: 1.5rem;
    }
  }
  @media print {
  }