/* ============================================================
   tokens.css — fonts, custom properties, reset.
   Loaded first. Nothing here targets a specific section.
   ============================================================ */

/* ------------------------------------------------------------------
   Fonts — self-hosted, no Google Fonts request.

   Each face ships as two files: `latin` covers ASCII, `latin-ext`
   covers č ć ž š đ Č Ć Ž Š Đ. The unicode-range on each declaration
   is what makes the browser reach for the right file mid-word — drop
   it and Croatian diacritics silently fall back to a system font.
   ------------------------------------------------------------------ */

@font-face {
  font-family: 'Archivo Black';
  src: url('../fonts/archivo-black-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo Black';
  src: url('../fonts/archivo-black-latin-ext-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/space-grotesk-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/space-grotesk-latin-ext-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/space-grotesk-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/space-grotesk-latin-ext-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/space-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/space-mono-latin-ext-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/space-mono-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/space-mono-latin-ext-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------
   Custom properties
   ------------------------------------------------------------------ */

:root {
  /* base */
  --bg:          #000000;
  --surface:     #0B0B10;
  --surface-2:   #14141C;
  --text:        #F4F4F6;
  --text-muted:  #8E8E9C;
  --hairline:    #23232E;
  --wave-idle:   #2E2E3B;

  /* neon spectrum */
  --neon-red:     #FF3B1F;
  --neon-orange:  #FF7A1A;
  --neon-yellow:  #FFD400;
  --neon-green:   #3BE86B;
  --neon-cyan:    #22D3EE;
  --neon-blue:    #2F6BFF;
  --neon-magenta: #C026FF;
  --neon-pink:    #FF2D95;

  /* live accent — set by the scrollspy, transitions over 250ms */
  --accent: var(--neon-red);

  /* type */
  --font-display: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --font-body:    'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'Courier New', monospace;

  --fs-display: clamp(2.75rem, 7vw, 6rem);
  --fs-h2:      clamp(2rem, 4.5vw, 3.5rem);
  --fs-h3:      clamp(1.25rem, 2vw, 1.75rem);
  --fs-body:    clamp(1rem, 1.1vw, 1.125rem);
  --fs-small:   0.875rem;

  /* rhythm — 8px base */
  --sp-1: 0.5rem;  --sp-2: 1rem;   --sp-3: 1.5rem;
  --sp-4: 2rem;    --sp-6: 3rem;   --sp-8: 4rem;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 65ch;
  --header-h: 68px;

  /* waveform geometry, read by the canvas renderer */
  --wave-bar: 3px;
  --wave-gap: 2px;

  color-scheme: dark;
}

html {
  transition: --accent 250ms linear;
}

/* Registering --accent lets it interpolate rather than snap between
   sections. Browsers without @property just get an instant swap. */
@property --accent {
  syntax: '<color>';
  inherits: true;
  initial-value: #FF3B1F;
}

/* ------------------------------------------------------------------
   Reset
   ------------------------------------------------------------------ */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  min-height: 100svh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }

img { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; padding: 0; cursor: pointer; }

p, h1, h2, h3, h4 { overflow-wrap: break-word; }

h1, h2, h3, h4 { font-weight: 400; line-height: 0.92; }

ul, ol { list-style: none; padding: 0; }

a { color: inherit; }

/* Visible keyboard focus everywhere, and only for keyboard users. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

::selection { background: var(--accent); color: #000; }

/* ------------------------------------------------------------------
   Shared type utilities
   ------------------------------------------------------------------ */

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.prose {
  max-width: var(--measure);
  color: var(--text);
}

.prose + .prose { margin-top: var(--sp-2); }

.prose a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.prose a:hover { color: var(--accent); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}