/* ============================================================
   CULLTRON — COLOR SYSTEM
   Aligned 1:1 with the live "Gridlight" design system
   (shared/ui/culltron.css). Dark void, energy-line accents,
   holographic panels. Extended with marketing surface aliases.
   ============================================================ */
:root {
  /* ---- The void (near-black → graphite → navy) ---- */
  --void: #04060c;          /* deepest canvas */
  --void-2: #070b14;        /* app shell */
  --panel: #0b1220;         /* base panel */
  --panel-2: #0e1628;       /* raised panel */
  --panel-3: #121c33;       /* top panel / modal */
  --graphite: #0a101d;      /* marketing card base */

  /* ---- Ink (text) ---- */
  --ink: #e8f4ff;           /* primary text */
  --ink-dim: #8fa7bf;       /* secondary / body */
  --ink-faint: #5b7390;     /* captions / labels */
  --ink-on-accent: #03131c; /* ink on cyan fills */

  /* ---- Brand accents (Gridlight) ---- */
  --accent: #00d4ff;        /* signature Culltron cyan */
  --accent-bright: #6be4ff; /* highlight */
  --accent-2: #ffc24d;      /* gold secondary */
  --blue: #4da3ff;          /* data blue */
  --violet: #b86bff;        /* design / aria violet */
  --ember: #ff7a45;         /* forge ember */
  --silver: #c9d6e4;        /* silver accent */

  /* ---- Status ---- */
  --ok: #3ddc97;
  --warn: #ffb020;
  --danger: #ff5a5a;
  --green-2: #41e08d;

  /* ---- Lines / borders (cyan energy lines) ---- */
  --line: rgba(0, 212, 255, 0.16);
  --line-soft: rgba(0, 212, 255, 0.08);
  --line-strong: rgba(0, 212, 255, 0.38);
  --line-neutral: rgba(255, 255, 255, 0.07);

  /* ---- Surfaces ---- */
  --surface-card-top: rgba(14, 22, 40, 0.72);
  --surface-card-bottom: rgba(10, 16, 30, 0.78);
  --surface-panel: rgba(11, 18, 32, 0.85);
  --surface-raised: rgba(0, 212, 255, 0.05);
  --surface-glass: rgba(8, 13, 24, 0.92);

  /* ---- Tinted fills (chips, glows, status) ---- */
  --accent-soft: rgba(0, 212, 255, 0.12);
  --fill-accent: rgba(0, 212, 255, 0.08);
  --fill-accent-strong: rgba(0, 212, 255, 0.16);
  --fill-blue: rgba(77, 163, 255, 0.14);
  --fill-violet: rgba(184, 107, 255, 0.14);
  --fill-ok: rgba(61, 220, 151, 0.10);
  --fill-warn: rgba(255, 176, 32, 0.12);
  --fill-danger: rgba(255, 90, 90, 0.12);
  --fill-neutral: rgba(143, 167, 191, 0.12);

  /* ---- Gradients ---- */
  --grad-accent: linear-gradient(180deg, rgba(0, 212, 255, 0.95), rgba(0, 150, 200, 0.92)); /* @kind color */
  --grad-accent-bright: linear-gradient(135deg, #00d4ff, #6be4ff 55%, #4da3ff); /* @kind color */
  --grad-accent-soft: linear-gradient(135deg, rgba(0, 212, 255, .18), rgba(77, 163, 255, .12)); /* @kind color */
  --grad-card: linear-gradient(180deg, var(--surface-card-top), var(--surface-card-bottom)); /* @kind color */
  --grad-stat: linear-gradient(160deg, rgba(0, 212, 255, 0.07), rgba(10, 16, 30, 0.6) 55%); /* @kind color */
  --grad-text: linear-gradient(118deg, #ffffff 0%, #b6ecff 52%, #6be4ff 100%); /* @kind color */
  --grad-canvas:
    radial-gradient(1100px 520px at 18% -10%, rgba(0, 212, 255, 0.10), transparent 60%),
    radial-gradient(900px 480px at 85% 110%, rgba(184, 107, 255, 0.07), transparent 60%),
    radial-gradient(700px 380px at 70% 20%, rgba(0, 212, 255, 0.04), transparent 55%),
    linear-gradient(180deg, var(--void-2), var(--void) 38%);

  /* ---- Semantic aliases ---- */
  --bg: var(--void);
  --text: var(--ink);
  --text-soft: var(--ink-dim);
  --text-muted: var(--ink-faint);
  --text-on-accent: var(--ink-on-accent);
  --border: var(--line);
  --surface-card: var(--grad-card);
  --link: var(--accent-bright);
  --cyan: var(--accent);
}