:root {
  /* ---- Base palette ---- */
  --white: #ffffff;
  --black-warm: #0a0908;      /* near-black canvas, faint warmth */
  --gray-charcoal-1: #171614; /* surface-1 */
  --gray-charcoal-2: #211f1c; /* surface-2 */
  --gray-line: #35322d;       /* hairline */
  --gray-line-soft: #211f1c;  /* hairline-soft */
  --gray-muted: #999999;      /* ink-muted */
  --blue-accent: #0099ff;
  --green-success: #35c46b;

  /* Signature gradient anchors (base hex; production use as gradient stops) */
  --gradient-magenta-a: #ff2ea6;
  --gradient-magenta-b: #7b2ff7;
  --gradient-violet-a: #6e3bff;
  --gradient-violet-b: #b23bff;
  --gradient-orange-a: #ff7a3d;
  --gradient-orange-b: #ffb23d;
  --gradient-coral-a: #ff5a7a;
  --gradient-coral-b: #ff8fa3;

  /* ---- Semantic aliases (use these in components) ---- */
  --color-primary: var(--white);
  --color-on-primary: var(--black-warm);
  --color-accent-blue: var(--blue-accent);

  --color-canvas: var(--black-warm);
  --color-surface-1: var(--gray-charcoal-1);
  --color-surface-2: var(--gray-charcoal-2);
  --color-hairline: var(--gray-line);
  --color-hairline-soft: var(--gray-line-soft);
  --color-inverse-canvas: var(--white);

  --color-ink: var(--white);
  --color-ink-muted: var(--gray-muted);

  --color-semantic-success: var(--green-success);

  --gradient-magenta: linear-gradient(135deg, var(--gradient-magenta-a), var(--gradient-magenta-b));
  --gradient-violet: linear-gradient(135deg, var(--gradient-violet-a), var(--gradient-violet-b));
  --gradient-orange: linear-gradient(135deg, var(--gradient-orange-a), var(--gradient-orange-b));
  --gradient-coral: linear-gradient(135deg, var(--gradient-coral-a), var(--gradient-coral-b));

  /* Focus / selection ring */
  --ring-focus: 0 0 0 1px rgba(0, 153, 255, 0.15);
}