/* ==========================================================================
   Design tokens — cyberpunk
   The ONLY place colour, type and spacing values are defined. Restyling the
   site means editing this file, not the markup. (principles.md #1)

   Contrast measured against --bg, WCAG 2.x:
     --text     16.6:1     --muted     8.0:1
     --primary  12.8:1     --accent    5.7:1     --warn  10.8:1
   White on --accent is only 3.5:1, so anything filled with --accent takes
   dark text (--on-accent), never white.
   ========================================================================== */

/* --- Fonts. Self-hosted, no CDN. (principles.md #5) ---------------------- */

/* Angular and technical, for headings and labels only — never body text. */
@font-face {
  font-family: "Chakra Petch";
  src: url("../fonts/chakra-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
/* Variable. Chosen for legibility at small sizes — this is the workhorse. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
/* Terminal register, and unambiguous 0/O and 1/l/I — which matters a lot on
   a site full of node IDs, PSKs and frequencies. */
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jbmono-var.woff2") format("woff2");
  font-weight: 100 800; font-style: normal; font-display: swap;
}

:root {
  color-scheme: dark;

  /* --- Surfaces. Cool near-black, not pure black: pure black plus neon
         vibrates unpleasantly and hurts sustained reading. --- */
  --bg:          #0A0B10;
  --surface:     #12141B;
  --surface-2:   #181B24;
  --border:      #262B38;
  --border-lit:  #38445C;

  /* --- Text --- */
  --text:        #E8ECF4;
  --muted:       #9BA6BC;

  /* --- Neon --- */
  --primary:     #00E5FF;   /* cyan — links, values, primary accents */
  --primary-dim: #0891A3;
  --accent:      #FF2D95;   /* magenta — sparingly, for emphasis */
  --accent-dim:  #A31760;
  --warn:        #FFB020;
  --on-accent:   #0A0B10;   /* text on any filled neon surface */

  /* --- Glow. Cyberpunk's signature. Kept low so text stays crisp. --- */
  --glow-primary: 0 0 12px rgb(0 229 255 / .35);
  --glow-accent:  0 0 12px rgb(255 45 149 / .35);
  --text-glow:    0 0 18px rgb(0 229 255 / .30);

  /* --- Type --- */
  --font-display: "Chakra Petch", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid: no fixed pixel sizes anywhere. (principles.md #3) */
  --step--1: clamp(0.80rem, 0.77rem + 0.13vw, 0.87rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.12rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.40vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.30rem + 0.75vw, 2.00rem);
  --step-3:  clamp(1.90rem, 1.60rem + 1.50vw, 3.00rem);

  --leading:      1.65;
  --leading-tight: 1.15;
  --tracking-wide: 0.14em;
  --measure:      68ch;

  /* --- Space --- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.5rem;   --sp-6: 2rem;
  --sp-7: 3rem;     --sp-8: 4rem;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --wrap:   72rem;

  /* --- Shape. Angular, not rounded — chamfered corners are the cheapest
         way to read as cyberpunk without touching legibility. --- */
  --chamfer:    10px;
  --chamfer-sm: 6px;
  --radius:     2px;

  --tap: 44px;              /* minimum touch target (principles.md #3) */
  --speed: 160ms;
}