/* VIDDYSLAP design tokens — restyle per Projects/vj-portfolio-site/specs/style-guide.md (2026-07-21).
   Both families are vendored so typography never depends on a third-party request. */
@font-face {
  font-family: "Archivo";
  src: url("./fonts/Archivo-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

@font-face {
  font-family: "D-DIN";
  src: url("./fonts/D-DIN.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "D-DIN";
  src: url("./fonts/D-DIN-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "D-DIN";
  src: url("./fonts/D-DIN-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* mono base */
  --vs-black: #08080a;
  --vs-panel: #141417;
  --vs-panel-edge: #26262b;

  /* RGB accents by role (tuned for legibility on black, not pure primaries) */
  --vs-red: #ff3040;   --vs-red-on: #140406;   --vs-red-glow: rgba(255, 48, 64, 0.5);
  --vs-green: #35e85a; --vs-green-on: #062012;  --vs-green-glow: rgba(53, 232, 90, 0.5);
  --vs-blue: #3d7bff;  --vs-blue-on: #f2f2f4;   --vs-blue-glow: rgba(61, 123, 255, 0.5);

  /* semantic roles */
  --vs-action: var(--vs-red);   /* buttons, CTAs */
  --vs-live: var(--vs-green);   /* highlights, stats, live content */
  --vs-nav: var(--vs-blue);     /* links, navigation, secondary */

  /* text */
  --vs-text: #f2f2f4;
  --vs-text-dim: #b0b0b8;
  --vs-silkscreen: #c6c6ce;

  /* legacy amber tokens remapped onto the green "live/content" accent so existing
     references adopt the new system; specific selectors override to red/blue. */
  --vs-led: var(--vs-green);
  --vs-led-hot: var(--vs-green);
  --vs-led-dim: #17603a;
  --vs-led-glow: var(--vs-green-glow);

  /* type: Archivo for display/UI, D-DIN for body */
  --vs-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --vs-font-body: "D-DIN", "Archivo", system-ui, sans-serif;
  /* the guide is a two-font system; "mono" now maps to Archivo for technical labels */
  --vs-font-mono: "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* shape */
  --vs-radius: 10px;
  --vs-radius-sm: 5px;
}