/* Witly Design System — Color tokens
   Dark indigo canvas, violet→fuchsia accents. Base values first, semantic aliases below. */
:root {
  /* ---- Brand ---- */
  --brand-fuchsia: #D946EF;
  --brand-violet: #6B46C1;
  --brand-purple: #8B5CF6;
  --brand-magenta: #C026D3;
  --brand-lilac: #A78BFA;

  /* ---- Ink surfaces (dark canvas, lightest → deepest) ---- */
  --surface-card-hover: #211A43;
  --surface-card: #1A1635;
  --ink-750: #1D173B;
  --ink-800: #17142F;
  --ink-850: #121128;
  --ink-900: #0D0D1D;
  --ink-950: #080814;

  /* ---- Borders ---- */
  --border-accent: #7C3AED;
  --border-subtle: #32275A;
  --border-hairline: rgba(255, 255, 255, 0.06);

  /* ---- Text ---- */
  --text-primary: #F8F7FF;
  --text-secondary: #D8D4E8;
  --text-muted: #9D97B5;
  --text-faint: #6E6890;
  --text-accent: #E879F9;
  --placeholder: #7E7896;

  /* ---- Semantic status ---- */
  --success: #22C55E;
  --warning: #F59E0B;
  --error: #EF4444;
  --info: #38BDF8;
  --success-soft: rgba(34, 197, 94, 0.14);
  --warning-soft: rgba(245, 158, 11, 0.14);
  --error-soft: rgba(239, 68, 68, 0.14);
  --info-soft: rgba(56, 189, 248, 0.14);

  /* ---- Categorical / chart palette (restrained, on-brand) ---- */
  --chart-1: #8B5CF6;
  --chart-2: #D946EF;
  --chart-3: #38BDF8;
  --chart-4: #A78BFA;
  --chart-5: #C026D3;
  --chart-6: #5EEAD4;

  /* ---- Effects ---- */
  --focus-ring: #D946EF;
  --overlay: rgba(8, 8, 20, 0.72);

  /* ---- Gradients ---- */
  --gradient-brand: linear-gradient(90deg, #6B46C1 0%, #D946EF 100%); /* @kind color */
  --gradient-brand-soft: linear-gradient(135deg, rgba(107, 70, 193, 0.28) 0%, rgba(217, 70, 239, 0.12) 100%); /* @kind color */
  --gradient-card-highlight: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0) 100%); /* @kind color */
  --gradient-hero: radial-gradient(circle at 76% 62%, rgba(107, 70, 193, 0.48) 0%, rgba(38, 27, 84, 0.34) 35%, rgba(8, 8, 20, 0) 72%); /* @kind color */

  /* ---- Semantic aliases (prefer these in product code) ---- */
  --bg-app: var(--ink-900);
  --bg-sunken: var(--ink-950);
  --surface-1: var(--surface-card);   /* default card / panel */
  --surface-2: var(--ink-850);        /* alternating / inset panel */
  --surface-3: var(--ink-800);        /* elevated / modal */
  --surface-hover: var(--surface-card-hover);
  --border-default: var(--border-subtle);
  --text-heading: var(--text-primary);
  --text-body: var(--text-secondary);
  --accent: var(--brand-fuchsia);
  --accent-violet: var(--brand-violet);
}