/* ============================================================
   UPSCALE — Colors & Type
   Primary brand tokens. Import this file on any page.
   ============================================================ */

/* -------------------- FONTS -------------------- */

@font-face {
  font-family: "Lexend";
  src: url("fonts/Lexend-Thin.ttf") format("truetype");
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lexend";
  src: url("fonts/Lexend-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lexend";
  src: url("fonts/Lexend-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lexend";
  src: url("fonts/Lexend-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lexend";
  src: url("fonts/Lexend-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lexend";
  src: url("fonts/Lexend-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Glancyr Neue — secondary / display accent (ExtraLight only used here) */
@font-face {
  font-family: "Glancyr Neue";
  src: url("fonts/GlancyrNeue-ExtraLight.ttf") format("truetype");
  font-weight: 200; font-style: normal; font-display: swap;
}

/* -------------------- TOKENS -------------------- */

:root {
  /* Primary palette */
  --eerie-black: #191919;
  --lime-green:  #34C52A;

  /* Secondary palette */
  --dark-cyan:   #429792;
  --ivory:       #FEFFEA;
  --purple:      #7F2A90;

  /* Polestar brief — five-colour system. Greys carry tonal-on-tonal. */
  --mid-grey:    #666666;
  --light-grey:  #aaa99f;
  --cream:       #FEFFEA;

  /* Hairlines (Polestar directive 3) — 1px, Eerie Black or Lime Green */
  --hairline:        rgba(25,25,25,0.16);
  --hairline-strong: rgba(25,25,25,0.30);
  --hairline-cream:  rgba(254,255,234,0.18);
  --hairline-cream-strong: rgba(254,255,234,0.34);
  --hairline-green:  rgba(52,197,42,0.55);

  /* One card-elevation token — soft, low-opacity, large blur, minimal offset */
  --card-elev: 0 2px 48px rgba(25,25,25,0.10);
  --card-elev-cream: 0 2px 48px rgba(0,0,0,0.22);

  /* Neutrals — derived, used sparingly */
  --ink-900: #191919;
  --ink-700: #2a2a2a;
  --ink-500: #5a5a5a;
  --ink-300: #a8a8a8;
  --ink-100: #e6e6e6;
  --ink-050: #f3f3ef;

  /* Semantic surfaces */
  --bg:            var(--ivory);
  --bg-inverse:    var(--eerie-black);
  --surface:       #ffffff;
  --surface-muted: var(--ink-050);

  /* Semantic foregrounds */
  --fg:            var(--eerie-black);
  --fg-muted:      var(--ink-500);
  --fg-subtle:     var(--ink-300);
  --fg-inverse:    var(--ivory);

  /* Accents — Lime Green is NEVER body text and NEVER on Ivory */
  --accent:        var(--lime-green);
  --accent-on-dark-only: var(--lime-green); /* explicit reminder */
  --accent-cyan:   var(--dark-cyan);
  --accent-purple: var(--purple);

  /* Borders / dividers */
  --border:        rgba(25, 25, 25, 0.12);
  --border-strong: rgba(25, 25, 25, 0.32);
  --border-inverse: rgba(254, 255, 234, 0.18);

  /* Type families */
  --font-sans:    "Lexend", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Lexend everywhere — headings are Lexend Bold (700), per the brand bible.
     Glancyr Neue stays in the design system (and its @font-face above) but is
     no longer the site's display face. */
  --font-display: "Lexend", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — tuned from the brand guide (130pt/90pt/20pt) scaled for web */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;   /* body default on web */
  --text-md:   18px;
  --text-lg:   20px;   /* brand body 20pt Light */
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  44px;
  --text-4xl:  64px;
  --text-5xl:  90px;   /* brand subheader 90pt Medium */
  --text-6xl:  130px;  /* brand header 130pt Bold */

  /* R4b C1 — ONE SIZE FOR RUNNING COPY. The client's instruction was literal: "Make all text
     the same size - 18. Font sizng shoudl be standard sccross the site." A clamp is by
     definition not standard across the site, so --fs-lead and --fs-body are the SAME FLAT
     18px and there is no width term left in either. Both used to bottom out at 18/20 below
     1000px and climb to 20/22 above it, which is what made a lede on a 1600px monitor two
     points larger than the same lede on a laptop.
     THE HEADING SCALE IS UNTOUCHED — --fs-statement / --fs-sec-head / --fs-sub-head keep
     their clamps, because the ask was about text, not about display type, and collapsing the
     headings would leave the page with one size and no hierarchy at all.
     --fs-meta (16px) is the LABEL tier and stays: nav items, buttons, form labels, captions,
     the AiQ node labels (--pt is sized against this value) and the placeholder notes.
     --text-sm (14px) is the microcopy tier and stays: the caps ceiling for .eyebrow, the AiQ
     numerals and the 4Ps, the footer privacy line and the copyright line.
     If a future element needs a size these three do not name, give it a NAME in site.css's
     marked :root block — never an inline clamp. */
  --fs-statement: clamp(38px, calc(2.4vw + 26px), 66px);
  --fs-sec-head:  clamp(34px, calc(0.95vw + 31px), 46px);
  --fs-sub-head:  clamp(26px, calc(0.72vw + 21.5px), 34px);
  --fs-lead:      18px;
  --fs-body:      18px;
  --fs-meta:      16px;

  /* Line heights */
  --lh-tight:   1.02;
  --lh-snug:    1.12;
  --lh-normal:  1.4;
  --lh-relaxed: 1.55;

  /* Letter spacing — Lexend reads well tight at display sizes */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* Radii — Upscale is hard-edged. Keep radii minimal. */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* Spacing (4pt base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Shadow — used sparingly; the brand is flat */
  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(25,25,25,0.06);
  --shadow-md:   0 6px 24px rgba(25,25,25,0.08);
  --shadow-lg:   0 20px 60px rgba(25,25,25,0.12);

  /* Motion — deliberately slowed for a calmer, more cinematic choreography.
     These propagate to every transition/animation that reads them (beats, accent pulse,
     letter reveals, deck wipes/curtains via site.js ms()). */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.2, 1);
  --dur-fast:    180ms;
  --dur-base:    340ms;
  --dur-slow:    640ms;
}

/* -------------------- BASE TYPE -------------------- */

html { font-family: var(--font-sans); color: var(--fg); background: var(--bg); }
body {
  font-family: var(--font-sans);
  font-weight: 300;              /* Light — the brand body weight */
  font-size: var(--text-lg);     /* 20px body */
  line-height: var(--lh-relaxed);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — Bold, tight, sentence case. No ALL CAPS by default. */
h1, .h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(44px, 8vw, 130px);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0 0 var(--space-6);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(32px, 5vw, 90px);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 44px);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0 0 var(--space-4);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0 0 var(--space-3);
}

p, .body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  text-wrap: pretty;
  margin: 0 0 var(--space-4);
}

.body-sm {
  font-size: var(--text-base);
  font-weight: 300;
  line-height: var(--lh-normal);
}

.caption {
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.eyebrow {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.display {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(64px, 12vw, 220px);
  line-height: 0.95;
  letter-spacing: var(--tracking-tight);
}

/* Brand arrow bullet list — use → instead of • */
ul.arrow-list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 var(--space-4);
}
ul.arrow-list li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: var(--space-2);
}
ul.arrow-list li::before {
  content: "→";
  position: absolute; left: 0; top: 0;
  color: var(--eerie-black);
  font-weight: 500;
}

/* Selection */
::selection { background: var(--lime-green); color: var(--eerie-black); }

/* -------------------- DARK (INVERSE) CONTEXT -------------------- */
/* Apply .on-dark to any surface that uses the Eerie Black bg — Lime Green is cleared to use here */
.on-dark {
  background: var(--eerie-black);
  color: var(--ivory);
}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark p, .on-dark .caption {
  color: var(--ivory);
}
.on-dark .eyebrow { color: rgba(254, 255, 234, 0.7); }
.on-dark .accent { color: var(--lime-green); }