/* Joer — design tokens. Cyber brutalist: near-black plates, one acid accent, mono labels and buttons. */

/* Self-hosted fonts (Google Fonts, latin subset). Archivo and JetBrains Mono are variable: one file covers every weight */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton-latin.woff2') format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Color — an accent, an ink and a paper. Themes (acessibilidade.css) swap them */
  --accent: #c8f53b;
  --ink: #111310;
  --paper: #e9ece2;
  --ink-deep: #0b0c0a;

  /* Light mode: the page is the accent, inked in near-black */
  --surface-page: var(--accent);
  --surface-panel: var(--ink);
  --surface-media: var(--ink-deep);
  --text-primary: var(--ink);
  --text-display: var(--paper);
  --text-on-panel: var(--accent);
  --text-hover: var(--paper);
  --border-strong: var(--ink);
  --border-on-panel: var(--accent);
  --selection-bg: var(--ink);
  --selection-fg: var(--accent);
  --text-accent: var(--text-display); /* HUD marks: section indexes, readouts, "+" crossings, corners */

  /* HUD — hairline grid behind the page and the "+" marks at its crossings */
  --grid-line: color-mix(in srgb, var(--text-primary) 9%, transparent);
  --grid-cell: 80px;
  --hud-line: color-mix(in srgb, var(--border-strong) 28%, transparent);

  /* Type — titles and running text keep their faces; mono is for labels, buttons and HUD readouts */
  --font-display: Anton, Impact, sans-serif;
  --font-body: Archivo, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Spacing — exact site values, not a 4/8 grid */
  --space-4: 4px;
  --space-6: 6px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-26: 26px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;
  --space-88: 88px;
  --space-112: 112px;
  --space-140: 140px;
  --space-160: 160px;
  --space-180: 180px;

  /* Radius */
  --radius-none: 0;
  --radius-media: 0;
  --radius-panel: 0;

  /* Layout */
  --content-max: 1680px;
  --rule-strong: 2px;
  --rule-hair: 1px;
  --gutter: clamp(var(--space-20), 4vw, var(--space-56));
  --header-offset: calc(120px + var(--a11y-height, 0px)); /* sticky accessibility bar + header height + breathing room for anchor jumps */

  /* Opacity */
  --opacity-dimmed: 0.35;
}