/* ============================================================
   EPIK OCEAN — TOKENS (rebrand 2026-06)
   Direction: "Sui structure + Aaru voltage"
   Loads FIRST. Everything downstream reads these vars.
   ============================================================ */

@font-face {
  font-family: 'Switzer';
  src: url('fonts/Switzer-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/Newsreader.ttf') format('truetype');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/Newsreader-Italic.ttf') format('truetype');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* colour — aaru palette
     NOTE: --ink is the TEXT colour in epik-ocean.css's existing system,
     so the blacks here are named --black / --raised to avoid collision. */
  --black: #0A0A0B;
  --raised: #141415;
  --paper: #F4F4F2;
  --blue: #1019EC;
  --blue-soft: #298DFF;
  --yellow: #EBFB10; /* max TWO uses on the whole page */
  --grey-300: #A1A7B2;
  --grey-500: #6C7584;
  --grey-700: #343940;
  --hairline-d: rgba(255, 255, 255, 0.14);
  --hairline-l: rgba(10, 10, 11, 0.16);

  /* type — sui system */
  --f-sans: 'Switzer', system-ui, sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, monospace;
  --f-serif: 'Newsreader', Georgia, serif;
  --fs-hero: clamp(56px, 9vw, 150px);
  --fs-h2: clamp(40px, 5.5vw, 72px);
  --fs-h3: clamp(24px, 2.6vw, 34px);
  --fs-body: 17px;
  --fs-mono: 12px;
}

/* light-section flip (sui dark↔light alternation).
   Re-scopes the THEME vars from epik-ocean.css so every existing
   component (kickers, tags, rules, copy) flips automatically. */
.sec--light {
  background: var(--paper);
  color: var(--black);
  --ink: #0A0A0B;
  --mute: rgba(10, 10, 11, 0.62);
  --faint: rgba(10, 10, 11, 0.42);
  --line: rgba(10, 10, 11, 0.12);
  --line-2: rgba(10, 10, 11, 0.2);
  --hairline-d: var(--hairline-l);
  --grid: rgba(10, 10, 11, 0.04);
}

/* dotted rule (sui grid language) */
.dotrule {
  border: 0;
  border-top: 1px dotted var(--hairline-d);
  margin: 0;
}
.sec--light .dotrule { border-top-color: var(--hairline-l); }

/* mono label (sui technical captions) */
.monolabel {
  font: 500 var(--fs-mono) / 1 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-500);
}

/* blue square bullet (sui) */
.sqdot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--blue);
  flex: none;
}