/* ============================================================================
  Design Tokens - AIUDAA
   Single source of truth for color, type, spacing, motion.
   ============================================================================ */

:root {
  /* ─── Neutral (warm gray, slight cool tint) ───────────────────────────── */
  --gray-50:  #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* ─── Brand — Indigo (primary) ────────────────────────────────────────── */
  --brand-50:  #eef2ff;
  --brand-100: #e0e7ff;
  --brand-200: #c7d2fe;
  --brand-300: #a5b4fc;
  --brand-400: #818cf8;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;
  --brand-800: #3730a3;
  --brand-900: #312e81;

  /* ─── Accent — Emerald (XP / progress / wins) ─────────────────────────── */
  --accent-50:  #ecfdf5;
  --accent-100: #d1fae5;
  --accent-200: #a7f3d0;
  --accent-300: #6ee7b7;
  --accent-400: #34d399;
  --accent-500: #10b981;
  --accent-600: #059669;
  --accent-700: #047857;
  --accent-800: #065f46;
  --accent-900: #064e3b;

  /* ─── Semantic ────────────────────────────────────────────────────────── */
  --warn-50:  #fffbeb;
  --warn-100: #fef3c7;
  --warn-500: #f59e0b;
  --warn-600: #d97706;
  --warn-700: #b45309;

  --danger-50:  #fef2f2;
  --danger-100: #fee2e2;
  --danger-200: #fecaca;
  --danger-300: #fca5a5;
  --danger-500: #ef4444;
  --danger-600: #dc2626;
  --danger-700: #b91c1c;

  --info-50:  #eff6ff;
  --info-100: #dbeafe;
  --info-200: #bfdbfe;
  --info-300: #93c5fd;
  --info-500: #3b82f6;
  --info-600: #2563eb;
  --info-700: #1d4ed8;

  /* Aliases so templates can use either --warn-* or --warning-*, and
     --success-* resolves to our emerald accent palette. */
  --warning-50:  var(--warn-50);
  --warning-100: var(--warn-100);
  --warning-200: #fde68a;
  --warning-300: #fcd34d;
  --warning-400: #fbbf24;
  --warning-500: var(--warn-500);
  --warning-600: var(--warn-600);
  --warning-700: var(--warn-700);

  --success-50:  var(--accent-50);
  --success-100: var(--accent-100);
  --success-200: var(--accent-200);
  --success-300: var(--accent-300);
  --success-400: var(--accent-400);
  --success-500: var(--accent-500);
  --success-600: var(--accent-600);
  --success-700: var(--accent-700);

  /* ─── Gamification gradients ──────────────────────────────────────────── */
  --xp-gradient: linear-gradient(90deg, #10b981 0%, #14b8a6 50%, #06b6d4 100%);
  --streak-gradient: linear-gradient(180deg, #fbbf24 0%, #f97316 50%, #ef4444 100%);
  --level-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);

  /* ─── Surface (semantic) ──────────────────────────────────────────────── */
  --surface-0: var(--gray-50);
  --surface-1: #ffffff;
  --surface-2: var(--gray-50);
  --surface-3: var(--gray-100);
  --surface-inverse: var(--gray-900);

  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-tertiary: var(--gray-500);
  --text-disabled: var(--gray-400);
  --text-inverse: #ffffff;

  --border-subtle: var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong: var(--gray-400);

  --focus-ring: 0 0 0 3px rgb(99 102 241 / 0.25);

  /* ─── Typography ──────────────────────────────────────────────────────── */
  --font-display: 'Cal Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* ─── Spacing ─────────────────────────────────────────────────────────── */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ─── Radius ──────────────────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* ─── Elevation ───────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px 0 rgb(15 23 42 / 0.04);
  --shadow-sm: 0 1px 3px 0 rgb(15 23 42 / 0.08), 0 1px 2px -1px rgb(15 23 42 / 0.04);
  --shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.04);
  --shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.10), 0 4px 6px -4px rgb(15 23 42 / 0.06);
  --shadow-xl: 0 20px 25px -5px rgb(15 23 42 / 0.12), 0 8px 10px -6px rgb(15 23 42 / 0.06);
  --shadow-2xl: 0 25px 50px -12px rgb(15 23 42 / 0.25);

  /* ─── Z-index ─────────────────────────────────────────────────────────── */
  --z-base: 1;
  --z-sticky: 10;
  --z-dropdown: 20;
  --z-modal: 30;
  --z-toast: 40;
  --z-tooltip: 50;

  /* ─── Motion ──────────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --dur-slower: 500ms;

  /* ─── Layout ──────────────────────────────────────────────────────────── */
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 52px;
  --hud-h: 44px;

  /* ─── Stage colors (Pipeline) ─────────────────────────────────────────── */
  --stage-new_lead: #64748b;
  --stage-contacted: #3b82f6;
  --stage-warm: #f59e0b;
  --stage-nurturing: #14b8a6;
  --stage-meeting_set: #f97316;
  --stage-active_partner: #10b981;
  --stage-freezer: #0ea5e9;
  --stage-lost: #ef4444;
}

/* ─── Dark theme ──────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --gray-50:  #0b1220;
  --gray-100: #0f172a;
  --gray-200: #1e293b;
  --gray-300: #334155;
  --gray-400: #475569;
  --gray-500: #64748b;
  --gray-600: #94a3b8;
  --gray-700: #cbd5e1;
  --gray-800: #e2e8f0;
  --gray-900: #f1f5f9;

  --surface-0: #0b1220;
  --surface-1: #111827;
  --surface-2: #1e293b;
  --surface-3: #243043;
  --surface-inverse: #f1f5f9;

  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-tertiary: #94a3b8;
  --text-disabled: #64748b;
  --text-inverse: #0f172a;

  --border-subtle: #1e293b;
  --border-default: #334155;
  --border-strong: #475569;

  --brand-500: #818cf8;
  --brand-600: #6366f1;

  /* Dark-mode semantic tint overrides — flip "-50/-100" tints to translucent
     dark-surface mixes so colored cards don't glare in dark mode. */
  --brand-50:  color-mix(in srgb, #6366f1 14%, #1e293b);
  --brand-100: color-mix(in srgb, #6366f1 22%, #1e293b);

  --accent-50:  color-mix(in srgb, #10b981 14%, #1e293b);
  --accent-100: color-mix(in srgb, #10b981 22%, #1e293b);

  --success-50:  color-mix(in srgb, #10b981 14%, #1e293b);
  --success-100: color-mix(in srgb, #10b981 22%, #1e293b);

  --warn-50:   color-mix(in srgb, #f59e0b 14%, #1e293b);
  --warn-100:  color-mix(in srgb, #f59e0b 22%, #1e293b);
  --warning-50:  color-mix(in srgb, #f59e0b 14%, #1e293b);
  --warning-100: color-mix(in srgb, #f59e0b 22%, #1e293b);

  --danger-50:  color-mix(in srgb, #ef4444 14%, #1e293b);
  --danger-100: color-mix(in srgb, #ef4444 22%, #1e293b);

  --info-50:  color-mix(in srgb, #3b82f6 14%, #1e293b);
  --info-100: color-mix(in srgb, #3b82f6 22%, #1e293b);

  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.6), 0 4px 6px -4px rgb(0 0 0 / 0.3);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.7);
}

/* Respect OS preference on first load, if user hasn't set a theme */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    /* We'll mirror above in JS; this is a fallback if JS is off */
  }
}

/* ─── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur-base: 0.01ms;
    --dur-slow: 0.01ms;
    --dur-slower: 0.01ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}