/* ============================================================
   Tilt Protocol — Color tokens
   Dark-native palette. Pure-black canvas, near-black surfaces,
   one electric neon-green accent, zinc neutrals, and a small
   set of semantic signal colors (gold = verified, violet = AI).
   ============================================================ */

:root {
  /* ---- Base canvas & surfaces (darkest → lightest) ---- */
  --black: #000000;          /* page canvas */
  --surface-000: #020202;    /* footer / deepest panel */
  --surface-050: #040404;    /* section band */
  --surface-100: #060606;    /* sidebar */
  --surface-150: #080808;    /* card / popover */
  --surface-200: #0a0a0a;    /* raised card, muted */
  --surface-300: #111111;    /* secondary / accent fill */

  /* ---- Hairlines (white at low alpha — the Tilt signature) ---- */
  --line-subtle: rgba(255, 255, 255, 0.04);   /* default card border */
  --line: rgba(255, 255, 255, 0.06);          /* input / divider */
  --line-strong: rgba(255, 255, 255, 0.10);   /* hover border */
  --fill-subtle: rgba(255, 255, 255, 0.02);   /* card tint */
  --fill: rgba(255, 255, 255, 0.03);          /* chip / control */
  --fill-hover: rgba(255, 255, 255, 0.06);    /* hover tint */

  /* ---- Brand: electric green ---- */
  --green: #00dc82;          /* primary brand / CTA */
  --green-bright: #00f090;   /* hover / gradient peak */
  --green-fg: #000000;       /* text/icon on green */
  --green-12: rgba(0, 220, 130, 0.12);
  --green-08: rgba(0, 220, 130, 0.08);
  --green-06: rgba(0, 220, 130, 0.06);
  --green-20: rgba(0, 220, 130, 0.20);
  --green-30: rgba(0, 220, 130, 0.30);

  /* ---- Neutral text (zinc ramp) ---- */
  --fg: #fafafa;             /* primary text */
  --fg-muted: #a1a1aa;       /* zinc-400 — secondary */
  --fg-dim: #71717a;         /* zinc-500 — muted */
  --fg-faint: #52525b;       /* zinc-600 — labels */
  --fg-ghost: #3f3f46;       /* zinc-700 — placeholders */

  /* ---- Semantic signals ---- */
  --up: #00dc82;             /* positive return (== green) */
  --down: #ff4444;           /* negative return / destructive */
  --gold: #fbbf24;           /* verified / elite / #1 rank */
  --gold-soft: #ffd666;      /* gold shimmer peak */
  --violet: #8b5cf6;         /* AI agent */
  --violet-soft: #a78bfa;    /* AI agent (light) */
  --indigo: #6366f1;         /* secondary glow */
  --indigo-soft: #818cf8;    /* secondary pillar */
  --cyan: #00b4d8;           /* chart-2 */
  --bronze: #cd7f32;         /* #3 rank */
  --silver: #a1a1aa;         /* #2 rank */

  /* ---- Data-viz ramp (chart series) ---- */
  --chart-1: #00dc82;
  --chart-2: #00b4d8;
  --chart-3: #fbbf24;
  --chart-4: #a78bfa;
  --chart-5: #f87171;

  /* ---- Semantic aliases (use these in components) ---- */
  --bg-canvas: var(--black);
  --surface-card: var(--surface-150);
  --surface-raised: var(--surface-200);
  --border-card: var(--line-subtle);
  --border-hover: var(--line-strong);
  --text-primary: var(--fg);
  --text-secondary: var(--fg-muted);
  --text-muted: var(--fg-dim);
  --text-label: var(--fg-faint);
  --accent: var(--green);
  --accent-hover: var(--green-bright);
  --ring: var(--green);
}