/* ADD Horizons — color tokens
   Dark-studio palette: near-black stage, charcoal surfaces, purple system. */

:root {
  /* ---- base neutrals (dark scale, charcoal deepened toward near-black) ---- */
  --n-950: #0d0d12;   /* deepest stage background */
  --n-900: #16151d;   /* page background */
  --n-850: #201f29;   /* raised section background */
  --n-800: #282732;   /* card / panel surface */
  --n-750: #343341;   /* charcoal base — brand neutral */
  --n-700: #3f3e4d;   /* border on dark, hover surface */
  --n-600: #524f61;   /* subtle border / divider */
  --n-500: #6e6c7e;   /* muted grey — secondary text */
  --n-300: #a5a3b3;   /* tertiary text, placeholder */
  --n-100: #dcdae3;   /* faint text on dark */
  --n-0:   #f4f3f8;   /* off-white — primary type on dark */

  /* ---- brand purples ---- */
  --purple-900: #211f3d;   /* deep purple, gradients/shadows */
  --purple-700: #423a75;
  --purple-600: #59519c;   /* primary purple */
  --purple-500: #664fc6;   /* bright purple — CTAs, motion accents */
  --purple-400: #8874d6;
  --purple-300: #b3a6e6;
  --purple-200: #ddd6f5;

  /* ---- semantic states (harmonized with brand hue via oklch) ---- */
  --state-success: oklch(0.72 0.16 155);
  --state-success-bg: oklch(0.72 0.16 155 / 0.14);
  --state-warning: oklch(0.8 0.15 85);
  --state-warning-bg: oklch(0.8 0.15 85 / 0.14);
  --state-error: oklch(0.68 0.19 25);
  --state-error-bg: oklch(0.68 0.19 25 / 0.14);
  --state-info: var(--purple-400);
  --state-info-bg: oklch(0.55 0.09 290 / 0.16);

  /* ---- semantic aliases ---- */
  --bg-page: var(--n-900);
  --bg-page-deep: var(--n-950);
  --bg-surface: var(--n-850);
  --bg-card: var(--n-800);
  --bg-card-hover: var(--n-700);
  --bg-inset: var(--n-950);

  --border-subtle: var(--n-700);
  --border-default: var(--n-600);
  --border-strong: var(--n-500);

  --text-primary: var(--n-0);
  --text-secondary: var(--n-500);
  --text-tertiary: var(--n-300);
  --text-on-accent: var(--n-0);
  --text-link: var(--purple-400);
  --text-link-hover: var(--purple-300);

  --accent-primary: var(--purple-600);
  --accent-bright: var(--purple-500);
  --accent-bright-hover: #7861d4;
  --accent-bright-active: #5a45ad;

  --focus-ring: var(--purple-400);
}