/**
 * BaleCRM Design System — ElevenLabs-inspired palette
 * Light, minimal, high-contrast. Primary = black. Accents = decorative only.
 */

:root {
  /* ── Primary (black / near-black UI actions) ─────────────── */
  --color-primary-50: #f9fafb;
  --color-primary-100: #f3f4f6;
  --color-primary-200: #e5e7eb;
  --color-primary-300: #d1d5db;
  --color-primary-400: #9ca3af;
  --color-primary-500: #111827;
  --color-primary-600: #000000;
  --color-primary-700: #000000;
  --color-primary-800: #000000;
  --color-primary-900: #000000;
  --color-primary-950: #000000;

  /* ── Accent (mesh gradient / decorative only) ────────────── */
  --color-accent-50: #fdf4ff;
  --color-accent-100: #fae8ff;
  --color-accent-200: #f5d0fe;
  --color-accent-300: #f0abfc;
  --color-accent-400: #e879f9;
  --color-accent-500: #f472b6;
  --color-accent-600: #ec4899;
  --color-accent-700: #db2777;
  --color-accent-800: #be185d;
  --color-accent-900: #9d174d;
  --color-accent-950: #500724;

  /* ── Success ───────────────────────────────────────────── */
  --color-success-50: #ecfdf5;
  --color-success-100: #d1fae5;
  --color-success-200: #a7f3d0;
  --color-success-300: #6ee7b7;
  --color-success-400: #34d399;
  --color-success-500: #10b981;
  --color-success-600: #059669;
  --color-success-700: #047857;
  --color-success-800: #065f46;
  --color-success-900: #064e3b;
  --color-success-950: #022c22;

  /* ── Warning ───────────────────────────────────────────── */
  --color-warning-50: #fffbeb;
  --color-warning-100: #fef3c7;
  --color-warning-200: #fde68a;
  --color-warning-300: #fcd34d;
  --color-warning-400: #fbbf24;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;
  --color-warning-700: #b45309;
  --color-warning-800: #92400e;
  --color-warning-900: #78350f;
  --color-warning-950: #451a03;

  /* ── Error ─────────────────────────────────────────────── */
  --color-error-50: #fef2f2;
  --color-error-100: #fee2e2;
  --color-error-200: #fecaca;
  --color-error-300: #fca5a5;
  --color-error-400: #f87171;
  --color-error-500: #ef4444;
  --color-error-600: #dc2626;
  --color-error-700: #b91c1c;
  --color-error-800: #991b1b;
  --color-error-900: #7f1d1d;
  --color-error-950: #450a0a;

  /* ── Neutral (Tailwind gray — ElevenLabs base) ─────────── */
  --color-neutral-0: #ffffff;
  --color-neutral-50: #f9fafb;
  --color-neutral-100: #f3f4f6;
  --color-neutral-200: #e5e7eb;
  --color-neutral-300: #d1d5db;
  --color-neutral-400: #9ca3af;
  --color-neutral-500: #6b7280;
  --color-neutral-600: #4b5563;
  --color-neutral-700: #374151;
  --color-neutral-800: #1f2937;
  --color-neutral-900: #111827;
  --color-neutral-950: #030712;
  --color-neutral-1000: #000000;

  /* ── Gradients (decorative mesh — ElevenLabs style) ──────── */
  --gradient-ai: linear-gradient(135deg, #6366f1 0%, #f472b6 35%, #f59e0b 65%, #2dd4bf 100%);
  --gradient-hero: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
  --gradient-card: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(244, 114, 182, 0.06) 50%, rgba(45, 212, 191, 0.06) 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.72) 100%);

  /* ── Semantic — Background ─────────────────────────────── */
  --semantic-bg-primary: #ffffff;
  --semantic-bg-secondary: #f7f7f7;
  --semantic-bg-tertiary: #f3f4f6;
  --semantic-bg-elevated: #ffffff;

  /* ── Semantic — Surface ────────────────────────────────── */
  --semantic-surface-base: #ffffff;
  --semantic-surface-raised: #f9fafb;
  --semantic-surface-overlay: rgba(255, 255, 255, 0.95);

  /* ── Semantic — Border ─────────────────────────────────── */
  --semantic-border-subtle: #f3f4f6;
  --semantic-border-default: #e5e7eb;
  --semantic-border-strong: #d1d5db;
  --semantic-border-accent: #111827;

  /* ── Semantic — Text ───────────────────────────────────── */
  --semantic-text-primary: #111827;
  --semantic-text-secondary: #4b5563;
  --semantic-text-tertiary: #9ca3af;
  --semantic-text-disabled: #d1d5db;
  --semantic-text-inverse: #ffffff;

  /* ── Shadows (soft, minimal — ElevenLabs) ──────────────── */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-base: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-glow: 0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-glow-pink: 0 4px 14px rgba(139, 92, 246, 0.12);

  /* ── HSL tokens (for hsl(var(--token)) pattern) ────────── */
  --primary-h: 220;
  --primary-s: 13%;
  --primary-l: 9%;

  --accent-h: 330;
  --accent-s: 86%;
  --accent-l: 70%;

  --success-h: 160;
  --success-s: 84%;
  --success-l: 39%;

  --warning-h: 38;
  --warning-s: 92%;
  --warning-l: 50%;

  --danger-h: 0;
  --danger-s: 84%;
  --danger-l: 60%;

  --color-info-500: #2dd4bf;
  --color-info-600: #14b8a6;
  --info-h: 172;
  --info-s: 66%;
  --info-l: 50%;

  --semantic-sidebar-bg: #ffffff;
  --semantic-sidebar-active: #f3f4f6;
  --semantic-sidebar-hover: #f3f4f6;
  --semantic-scrollbar-thumb: rgba(17, 24, 39, 0.14);

  --neutral-h: 220;
  --neutral-s: 13%;
}

/* ── Dark mode semantic tokens ───────────────────────────── */
[data-theme=dark] {
  --color-neutral-0: #0a0a0a;
  --color-neutral-50: #111827;
  --color-neutral-100: #1f2937;
  --color-neutral-200: #374151;
  --color-neutral-300: #4b5563;
  --color-neutral-400: #6b7280;
  --color-neutral-500: #9ca3af;
  --color-neutral-600: #d1d5db;
  --color-neutral-700: #e5e7eb;
  --color-neutral-800: #f3f4f6;
  --color-neutral-900: #f9fafb;
  --color-neutral-950: #ffffff;
  --color-neutral-1000: #ffffff;

  --semantic-bg-primary: #171717;
  --semantic-bg-secondary: #0f0f0f;
  --semantic-bg-tertiary: #1f1f1f;
  --semantic-bg-elevated: #1c1c21;

  --semantic-surface-base: #25252b;
  --semantic-surface-raised: #2a2a30;
  --semantic-surface-overlay: rgba(28, 28, 33, 0.95);

  --semantic-border-subtle: #2a2a30;
  --semantic-border-default: #3f3f46;
  --semantic-border-strong: #52525b;
  --semantic-border-accent: #f9fafb;

  --semantic-text-primary: #f9fafb;
  --semantic-text-secondary: #d1d5db;
  --semantic-text-tertiary: #9ca3af;
  --semantic-text-disabled: #6b7280;
  --semantic-text-inverse: #111827;

  --semantic-sidebar-bg: #25252b;
  --semantic-sidebar-active: #3f3f46;
  --semantic-sidebar-hover: #2a2a30;
  --semantic-scrollbar-thumb: rgba(255, 255, 255, 0.14);

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  --shadow-base: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.45), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}