/* ============================================================
   DESIGN TOKENS
   This is the control panel for the whole site. Change a value
   here and it updates everywhere it is used.

   Colours are stored as raw "R G B" triplets (e.g. 139 92 246).
   This lets a single line re-skin every tint, border and fill
   built from that colour, e.g. rgb(var(--accent-rgb) / 0.20).
   ============================================================ */

:root {
  /* ---- Brand colours: change these three to re-theme ---- */
  --accent-rgb:      153 136 204;   /* primary purple   (#8b5cf6) */
  --accent-soft-rgb: 198 136 249;  /* lighter purple   (#a78bfa) */
  --ink-rgb:         240 240 240;  /* foreground used for text + surfaces */
  --bg-rgb:          13 13 13;        /* page background  (#000000) */

  /* ---- Solid colours derived from the triplets above ---- */
  --bg:          rgb(var(--bg-rgb));
  --accent:      rgb(var(--accent-rgb));
  --accent-soft: rgb(var(--accent-soft-rgb));

  /* ---- Text ---- */
  --text:       rgb(var(--ink-rgb) / 0.92);
  --text-muted: rgb(var(--ink-rgb) / 0.70);
  --text-faint: rgb(var(--ink-rgb) / 0.45);

  /* ---- Surfaces & lines ---- */
  --surface-1:   rgb(var(--ink-rgb) / 0.06);
  --surface-2:   rgb(var(--ink-rgb) / 0.04);
  --border:      rgb(var(--ink-rgb) / 0.12);
  --border-soft: rgb(var(--ink-rgb) / 0.10);
  --shadow:      0 12px 40px rgba(0, 0, 0, 0.45);

  /* ---- Accent tints (purple at fixed opacities) ---- */
  --accent-tint:    rgb(var(--accent-rgb) / 0.12);
  --accent-fill:    rgb(var(--accent-rgb) / 0.20);
  --accent-fill-hi: rgb(var(--accent-rgb) / 0.28);
  --accent-line:    rgb(var(--accent-rgb) / 0.35);
  --accent-line-hi: rgb(var(--accent-rgb) / 0.55);

  /* ---- Component tokens ---- */
  --card-bg:     var(--surface-1);
  --card-border: var(--border);

  --btn-bg:           rgb(var(--ink-rgb) / 0.06);
  --btn-bg-hover:     rgb(var(--ink-rgb) / 0.08);
  --btn-border:       var(--border);
  --btn-border-hover: rgb(var(--accent-soft-rgb) / 0.35);

  /* ---- Shape ---- */
  --radius:      18px;
  --radius-sm:   14px;
  --radius-pill: 999px;

  /* ---- Layout ---- */
  --container: 80vw;
  --pad:       20px;

  /* ---- Type ---- */
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
    "Apple Color Emoji", "Segoe UI Emoji";

  /* Display font for headings like the lead name. Falls back to --font
     until the custom font has loaded. Change the family name to re-skin. */
  --font-display: "Akira Expanded", var(--font);
}

/* ---- Akira Expanded (self-hosted) ----
   Akira Expanded is a commercial, ALL-CAPS display font (no lowercase).
   1. Buy/obtain the font, convert it to .woff2.
   2. Save it as assets/fonts/AkiraExpanded.woff2 (or edit the path below).
   Until the file exists, headings fall back to the default font. */
@font-face {
  font-family: "Akira Expanded";
  src: url("../fonts/AkiraExpanded.woff2") format("woff2"),
       url("../fonts/AkiraExpanded.otf") format("opentype");
  font-weight: 400 900;
  font-display: swap;
}