/* ============================================================
   Design tokens - the ONLY place raw color/spacing values live.
   Components and pages reference var(--token) exclusively so a
   theme swap (themes.css) never requires touching a component.
   ============================================================ */

:root {
  /* Brand */
  --primary: #6d5bf0;
  --primary-light: #8b7cf6;
  --primary-dark: #4c3fc7;
  --secondary: #a78bfa;

  /* Surfaces (overridden per-theme in themes.css) */
  --bg: #0b0c14;
  --bg-elevated: #0f1120;
  --surface: #12131f;
  --surface-2: #171928;
  --surface-glass: rgba(255, 255, 255, 0.06);
  --surface-glass-strong: rgba(255, 255, 255, 0.1);

  /* Text */
  --text-primary: #f4f4fb;
  --text-secondary: #a5a6c0;
  --text-muted: #6f7191;
  --text-on-primary: #ffffff;

  /* Border */
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* Feedback */
  --success: #22c55e;
  --success-bg: rgba(34, 197, 94, 0.14);
  --warning: #f59e0b;
  --warning-bg: rgba(245, 158, 11, 0.14);
  --danger: #ef4444;
  --danger-bg: rgba(239, 68, 68, 0.14);
  --info: #3b82f6;
  --info-bg: rgba(59, 130, 246, 0.14);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 999px;

  /* Shadow */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-3: 0 20px 48px rgba(0, 0, 0, 0.36);
  --blur: 16px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* Layout */
  --sidebar-width: 264px;
  --sidebar-width-collapsed: 76px;
  --header-height: 68px;
  --content-max: 1680px;

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
}