/* ============================================================
   Montari — Color tokens
   Rule: chrome is the MATERIAL, electric-blue is the ENERGY.
   Blue only as glow / hairlines / active accents — never as a
   large flat fill. Max one dominant blue accent per screen.
   ============================================================ */

:root {
  /* ---- Base / surfaces ---- */
  --bg: #0a0a0d;            /* void black, page base */
  --bg-elevated: #121318;   /* cards, panels */
  --bg-sunken: #060608;     /* wells, deepest black */
  --bg-overlay: #0d0e12;    /* sticky bars / scrims */

  /* ---- Ink ---- */
  --ink: #f5f7fa;           /* primary text */
  --ink-muted: #9aa3ad;     /* secondary text */
  --ink-faint: #5b626b;     /* tertiary / disabled */

  /* ---- Electric blue (the energy) ---- */
  --electric: #3b9eff;        /* signature accent + glow */
  --electric-deep: #1466d8;   /* deep blue, gradient stop */
  --electric-bright: #7cc4ff; /* highlight / glow stop */
  --electric-dim: rgba(59,158,255,0.16); /* tint wash, sparing */

  /* ---- Chrome (the material / brushed silver) ---- */
  --chrome-hi: #f0f3f6;     /* highlight */
  --chrome: #c3cbd4;        /* base metal */
  --chrome-lo: #6c747d;     /* shadow */

  /* ---- Lines, glass, scrims ---- */
  --line: rgba(255, 255, 255, 0.08);        /* hairline borders */
  --line-strong: rgba(255, 255, 255, 0.14); /* hairline, emphasised */
  --glass: rgba(120, 170, 255, 0.05);       /* subtle blue glass */
  --glass-strong: rgba(120, 170, 255, 0.09);
  --scrim: rgba(6, 6, 8, 0.72);             /* modal backdrop */

  /* ---- Feedback (kept cool to fit the void) ---- */
  --success: #46d6a0;
  --warning: #f2b657;
  --danger: #ff6b6b;
  --info: var(--electric);

  /* ---- Gradients ---- */
  /* Chrome text/metal: vertical brushed-silver sweep (logo DNA) */
  --grad-chrome: linear-gradient(180deg, #f0f3f6 0%, #dfe5ea 22%, #c3cbd4 48%, #8f97a0 74%, #6c747d 100%); /* @kind color */
  /* Chrome on an angle, for buttons / plates */
  --grad-chrome-angled: linear-gradient(145deg, #f0f3f6 0%, #c3cbd4 46%, #6c747d 100%); /* @kind color */
  /* Electric energy: glow stop -> core -> deep */
  --grad-electric: linear-gradient(180deg, var(--electric-bright) 0%, var(--electric) 45%, var(--electric-deep) 100%); /* @kind color */
  --grad-electric-angled: linear-gradient(135deg, var(--electric-bright) 0%, var(--electric) 40%, var(--electric-deep) 100%); /* @kind color */
  /* Radial blue bloom — drop behind a glowing object on void black */
  --grad-bloom: radial-gradient(circle at center, rgba(59,158,255,0.30) 0%, rgba(59,158,255,0.10) 35%, rgba(10,10,13,0) 70%); /* @kind color */
  /* Section wash — barely-there vertical lift off pure black */
  --grad-section: linear-gradient(180deg, #0a0a0d 0%, #0c0d12 50%, #0a0a0d 100%); /* @kind color */

  /* ---- Semantic aliases (prefer these in components) ---- */
  --surface: var(--bg);
  --surface-elevated: var(--bg-elevated);
  --surface-sunken: var(--bg-sunken);
  --text: var(--ink);
  --text-muted: var(--ink-muted);
  --text-faint: var(--ink-faint);
  --accent: var(--electric);
  --accent-deep: var(--electric-deep);
  --accent-bright: var(--electric-bright);
  --border: var(--line);
  --border-strong: var(--line-strong);
  --focus-ring: var(--electric);
}