/* ══════════════════════════════════════════════════════════
   TradesOnSmash — tokens.css   Ed. 04 "Holographic Trading Floor"
   Palette, local fonts, reset, typography.

   Palette provenance: green/purple hue families sampled from
   the TOS logo (green core #85CFAF,
   purple core #A67AC6 -- JPEG-desaturated). Values below are the
   canonical saturated versions. Magenta had NO distinct cluster:
   it is the peak of the purple glow, so it is reserved for
   confirmation / "hit" moments and the biggest hover payoffs.

   Fonts are self-hosted in assets/fonts/ so the page makes no
   third-party requests: faster first paint, and no visitor data
   sent to Google Fonts.
   ══════════════════════════════════════════════════════════ */

/* Only the weights the page actually renders are shipped (latin
   subset). The 600 files for Inter and IBM Plex Mono also answer
   requests for 700 -- <b> and <strong> inside body or mono text ask
   for bold -- so the browser uses real letterforms instead of
   smearing a fake bold over the 600. */
@font-face {
  font-family: "Chakra Petch"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("../assets/fonts/chakra-petch-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../assets/fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("../assets/fonts/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 600 700;
  font-display: swap; src: url("../assets/fonts/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600 700;
  font-display: swap; src: url("../assets/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
}

:root {
  --green:       #5FD4A3;
  --green-deep:  #3DAE82;
  --green-dim:   #2E736A;

  --purple:      #8B50C1;
  --purple-deep: #6B3AA0;
  --purple-lift: #A67AC6;

  --magenta:     #D87FF0;   /* confirmation / hit moments only */

  --void:        #07070A;
  --void-2:      #0C0C12;
  --void-3:      #12121A;
  --hair:        rgba(242, 242, 245, .12);

  --text:        #F2F2F5;
  --text-dim:    rgba(242, 242, 245, .64);
  --text-faint:  rgba(242, 242, 245, .40);
  --white:       #FFFFFF;

  --f-display: "Chakra Petch", "Arial Narrow", Impact, sans-serif;
  --f-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  --gut:  clamp(1.25rem, 4vw, 4rem);
  --maxw: 1240px;

  --glow-green:  0 0 6px rgba(95,212,163,.5), 0 0 22px rgba(95,212,163,.26);
  --glow-purple: 0 0 6px rgba(139,80,193,.55), 0 0 24px rgba(139,80,193,.3);
  --glow-mag:    0 0 8px rgba(216,127,240,.7), 0 0 30px rgba(216,127,240,.36);

  /* glass HUD surface */
  --glass: linear-gradient(150deg, rgba(255,255,255,.07), rgba(255,255,255,.02) 45%, rgba(255,255,255,.05));
  --glass-edge: rgba(255,255,255,.14);
}

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

html {
  -webkit-text-size-adjust: 100%;
  /* the marquee track is deliberately wider than the viewport;
     clip at the root so it can never create page-level scroll */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a   { color: inherit; }

::selection { background: var(--purple); color: var(--white); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 9999;
  background: var(--green); color: #04120C;
  padding: .75rem 1.25rem; font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ─── TYPE ─────────────────────────────────────────────── */

.display {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 7.6vw, 6.4rem);
  line-height: .98;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0 0 1.4rem;
  color: var(--white);
}

.hdl {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4.2vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -.015em;
  text-transform: uppercase;
  text-wrap: balance;
  max-width: 20ch;
  margin: 0;
}

.t-green  { color: var(--green);       text-shadow: var(--glow-green); }
.t-purple { color: var(--purple-lift); text-shadow: var(--glow-purple); }
.t-mag    { color: var(--magenta);     text-shadow: var(--glow-mag); }

.eyebrow {
  font-family: var(--f-mono);
  font-size: .7rem; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--text-faint);
  display: flex; align-items: center; gap: .7rem;
  margin: 0 0 1.1rem;
}
.eyebrow::before {
  content: ""; flex: 0 0 26px; height: 1px;
  background: currentColor; box-shadow: 0 0 8px currentColor;
}
.eyebrow--green  { color: var(--green); }
.eyebrow--purple { color: var(--purple-lift); }

.lede {
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  line-height: 1.7; max-width: 48ch;
  color: var(--text-dim);
  margin: 0 0 2.2rem;
}

.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }