/* =========================================================================
   TTM SITE NEXT — COMPONENT LAB · FOUNDATION TOKENS (v1, candidate)

   This file is the proposed base layer for the fresh rebuild. Every later
   component (header, hero, sections, footer) inherits from these tokens.

   Design intent (answers Chris's diagnosis of the old build):
   1. Dramatic typographic contrast: expanded Mona Sans display cuts, tight
      tracking, large level jumps. Nothing between levels; hierarchy reads
      at a glance.
   2. Depth without clutter: layered elevation (shadow + hairline + inner
      highlight), brand-tinted glows, and a whisper of grain. Surfaces are
      near-black, never flat gray slabs.
   3. Declutter by system: one spacing scale (4px base), one radius scale,
      generous band rhythm. If an element cannot justify its token, it goes.

   Brand law: Mona Sans only. #2575FC / #81F47B / #0097CF. Gradient is
   green -> cyan -> blue and is reserved for headline accents and the
   primary action. Dark first; light theme is fully designed, not inverted.
   ========================================================================= */

/* ----------------------------- font ----------------------------------- */
@font-face {
  font-family: "Mona Sans";
  src: url("/assets/fonts/MonaSans-Variable.ttf") format("truetype-variations");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Mona Sans";
  src: url("/assets/fonts/MonaSans-Variable.ttf") format("truetype-variations");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: italic;
  font-variation-settings: "ital" 1;
  font-display: swap;
}

/* ----------------------------- tokens --------------------------------- */
:root {
  /* brand */
  --blue: #2575FC;
  --green: #81F47B;
  --cyan: #0097CF;
  --grad: linear-gradient(90deg, #81F47B 0%, #0097CF 48%, #2575FC 100%);

  /* type scale: 4 dramatic levels + reading sizes. Clamp: min, fluid, max */
  --t-display-xl: clamp(3.25rem, 8.2vw, 6.25rem);   /* 52 -> 100px */
  --t-display:    clamp(2.5rem, 5.6vw, 4.25rem);    /* 40 -> 68px */
  --t-title:      clamp(1.875rem, 3.4vw, 2.75rem);  /* 30 -> 44px */
  --t-subhead:    clamp(1.25rem, 2vw, 1.5rem);      /* 20 -> 24px */
  --t-lede:       clamp(1.125rem, 1.5vw, 1.3125rem);/* 18 -> 21px */
  --t-body:       1.0625rem;                        /* 17px */
  --t-label:      0.75rem;                          /* 12px eyebrow */
  --t-caption:    0.8125rem;                        /* 13px meta */

  /* spacing scale, 4px base */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --band: clamp(96px, 15vh, 168px);        /* vertical rhythm between bands */
  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1180px;

  /* radius scale */
  --r1: 8px; --r2: 14px; --r3: 22px; --r-pill: 999px;

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 480ms;

  --font: "Mona Sans", sans-serif;
}

/* -------------------------- themes ------------------------------------ */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #05070B;
  --ink: #F4F7FA;
  --muted: #98A3B0;                 /* 8.1:1 on --bg */
  --faint: #7E8894;                 /* 5.4:1 on --bg, meta only */

  /* elevation: e0 flat page, e1 raised, e2 overlay, e3 floating */
  --e0: transparent;
  --e1: rgba(255, 255, 255, .030);
  --e2: rgba(255, 255, 255, .055);
  --e3: rgba(255, 255, 255, .085);
  --hair: rgba(255, 255, 255, .09);
  --hair-strong: rgba(255, 255, 255, .18);
  --inner-hi: inset 0 1px 0 rgba(255, 255, 255, .06);

  --sh-1: 0 14px 34px -18px rgba(0, 0, 0, .55);
  --sh-2: 0 24px 60px -24px rgba(0, 0, 0, .65);
  --sh-3: 0 40px 110px -32px rgba(0, 0, 0, .75);

  --glow-cyan: rgba(0, 151, 207, .16);
  --glow-blue: rgba(37, 117, 252, .14);
  --glow-green: rgba(129, 244, 123, .10);
  --grain-op: .05;
  --aurora-op: 1;
  --on-grad: #04121F;               /* text on gradient buttons */
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #F5F8FA;
  --ink: #0A0E14;
  --muted: #43505C;                 /* 8.3:1 on --bg */
  --faint: #5D6A76;                 /* 5.1:1 on --bg, meta only */

  --e0: transparent;
  --e1: #FFFFFF;
  --e2: #FFFFFF;
  --e3: #FFFFFF;
  --hair: rgba(10, 14, 20, .10);
  --hair-strong: rgba(10, 14, 20, .20);
  --inner-hi: inset 0 1px 0 rgba(255, 255, 255, .8);

  --sh-1: 0 12px 30px -16px rgba(15, 34, 61, .18);
  --sh-2: 0 22px 55px -22px rgba(15, 34, 61, .22);
  --sh-3: 0 38px 100px -30px rgba(15, 34, 61, .28);

  --glow-cyan: rgba(0, 151, 207, .10);
  --glow-blue: rgba(37, 117, 252, .09);
  --glow-green: rgba(46, 160, 60, .07);
  --grain-op: .035;
  --aurora-op: .8;
  --on-grad: #04121F;
}

/* --------------------------- base ------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100svh;
}

::selection { background: rgba(0, 151, 207, .32); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 6px;
}

/* fixed atmosphere: aurora washes + grain, below content, above bg */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--aurora-op);
}
.atmosphere::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(42% 34% at 12% 8%, var(--glow-cyan), transparent 70%),
    radial-gradient(38% 30% at 88% 92%, var(--glow-blue), transparent 70%),
    radial-gradient(30% 26% at 82% 12%, var(--glow-green), transparent 70%);
}
.atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--grain-op);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

#ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* content sits above atmosphere */
.page { position: relative; z-index: 1; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.band { padding-top: var(--band); }

/* ----------------------- type primitives ------------------------------- */
.eyebrow {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 var(--s4);
  display: flex;
  align-items: center;
  gap: var(--s3);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--grad);
  border-radius: 2px;
  flex: none;
}

.display-xl, .display, .title, .subhead {
  margin: 0;
  text-wrap: balance;
  letter-spacing: -.03em;
}
.display-xl {
  font-size: var(--t-display-xl);
  font-weight: 820;
  font-stretch: 112%;
  line-height: .98;
  letter-spacing: -.034em;
}
.display {
  font-size: var(--t-display);
  font-weight: 800;
  font-stretch: 110%;
  line-height: 1.0;
  letter-spacing: -.03em;
}
.title {
  font-size: var(--t-title);
  font-weight: 760;
  font-stretch: 107%;
  line-height: 1.06;
  letter-spacing: -.024em;
}
.subhead {
  font-size: var(--t-subhead);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.014em;
}
.lede {
  font-size: var(--t-lede);
  line-height: 1.5;
  color: var(--muted);
  font-weight: 420;
  margin: 0;
  text-wrap: pretty;
}
.body { color: var(--muted); margin: 0; }
.caption { font-size: var(--t-caption); color: var(--faint); margin: 0; }

/* brand signature: gradient headline accent */
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ------------------------- primitives ---------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  padding: 0 28px;
  border-radius: var(--r-pill);
  font: inherit;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: var(--grad);
  color: var(--on-grad);
  box-shadow: 0 12px 34px -12px var(--glow-cyan), 0 6px 18px -8px var(--glow-blue);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 44px -14px var(--glow-cyan), 0 10px 24px -10px var(--glow-blue); }
.btn-ghost {
  background: var(--e1);
  color: var(--ink);
  border-color: var(--hair-strong);
  box-shadow: var(--inner-hi);
}
.btn-ghost:hover { border-color: var(--cyan); transform: translateY(-2px); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 32px;
  padding: 0 var(--s4);
  border-radius: var(--r-pill);
  border: 1px solid var(--hair);
  background: var(--e1);
  color: var(--muted);
  font-size: var(--t-caption);
  font-weight: 600;
  letter-spacing: .04em;
  box-shadow: var(--inner-hi);
}

/* elevation cards */
.elev {
  background: var(--e1);
  border: 1px solid var(--hair);
  border-radius: var(--r2);
  box-shadow: var(--inner-hi), var(--sh-1);
}
.elev-2 { background: var(--e2); box-shadow: var(--inner-hi), var(--sh-2); }
.elev-3 { background: var(--e3); box-shadow: var(--inner-hi), var(--sh-3); }

/* ------------------------- accessibility ------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}