/* =====================================================================
 * DESIGN TOKENS ,  Arxada-leaning skin: vivid blue dominant, pink accent,
 * deep navy surfaces. Re-skin a future client by overriding these.
 * (client.js also injects brand colours at runtime.)
 * ===================================================================== */
:root {
  /* brand, blue dominant (Arxada), pink accent */
  --blue: #1E8BFF;        /* vivid Arxada-style blue */
  --blue-deep: #0A4FB0;
  --magenta: #FF2E92;     /* pink accent */
  --accent: #38D2FF;      /* bright cyan-blue highlight */
  --ink: #061230;

  /* surfaces, navy/blue tinted */
  --bg: #06122E;
  --bg-2: #0A1C42;
  --surface: #0F2350;
  --surface-2: #163063;
  --line: rgba(120,170,255,0.16);
  --line-strong: rgba(120,170,255,0.30);

  /* text */
  --text: #EAF1FF;
  --text-dim: #A8BEE6;
  --text-mute: #6F87BC;

  /* gradients, blue → pink (blue leads) */
  --grad: linear-gradient(120deg, var(--blue), var(--magenta));
  --grad-blue: linear-gradient(120deg, var(--blue-deep), var(--blue));
  --grad-soft: linear-gradient(120deg, rgba(30,139,255,0.16), rgba(255,46,146,0.12));

  /* type */
  --font-head: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* spacing / shape */
  --radius: 16px;
  --radius-sm: 10px;
  --maxw: 1080px;
  --toc-w: 240px;
  --shadow: 0 18px 50px rgba(0,8,30,0.55);
}