:root {
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Light theme (default) */
  --bg: #f3f5fb;
  --bg-elev: #ffffff;
  --bg-card: #ffffff;
  --bg-input: #ffffff;
  --bg-hover: #eef1f9;
  --text: #14161f;
  --text-dim: #565d70;
  --text-faint: #8990a3;
  --border: #e4e7f1;
  --border-strong: #cdd2e2;
  --accent: #5b5bf6;
  --accent-2: #9333ea;
  --accent-3: #ec4899;
  --accent-soft: #edeeff;
  --success: #0d9f6e;
  --success-soft: #e4f8f0;
  --warning: #d97706;
  --warning-soft: #fef3e2;
  --danger: #dc2626;
  --danger-soft: #fdeaea;
  --info: #2563eb;
  --info-soft: #e8f0fe;
  --purple-soft: #f2e8fe;

  /* Chart categorical palette — tuned to read on both themes */
  --chart-1: #5b5bf6;
  --chart-2: #9333ea;
  --chart-3: #ec4899;
  --chart-4: #f59e0b;
  --chart-5: #0d9f6e;
  --chart-6: #64748b;

  --shadow-sm: 0 1px 2px rgba(20, 24, 40, 0.06);
  --shadow-md: 0 4px 16px rgba(20, 24, 40, 0.08);
  --shadow-lg: 0 16px 40px rgba(20, 24, 40, 0.16);
  --shadow-card-hover: 0 14px 34px rgba(91, 91, 246, 0.18);
  --shadow-glow: 0 0 0 4px var(--accent-soft);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  --gradient-hero: linear-gradient(120deg, #5b5bf6 0%, #8b3ff0 48%, #ec4899 100%);
  --gradient-mesh:
    radial-gradient(circle at 12% 15%, rgba(91, 91, 246, 0.16), transparent 40%),
    radial-gradient(circle at 88% 10%, rgba(236, 72, 153, 0.14), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(147, 51, 234, 0.12), transparent 45%);
  --gradient-border: linear-gradient(135deg, var(--accent), var(--accent-3));
}

:root[data-theme="dark"] {
  --bg: #0c0e15;
  --bg-elev: #141724;
  --bg-card: #161a29;
  --bg-input: #10121d;
  --bg-hover: #1e2232;
  --text: #f0f2fa;
  --text-dim: #a7adc0;
  --text-faint: #6d7690;
  --border: #262b3d;
  --border-strong: #343b54;
  --accent: #8385ff;
  --accent-2: #b26bff;
  --accent-3: #ff7ec4;
  --accent-soft: #23264a;
  --success: #34d399;
  --success-soft: #0f2c22;
  --warning: #fbbf24;
  --warning-soft: #332506;
  --danger: #f87171;
  --danger-soft: #3a1616;
  --info: #60a5fa;
  --info-soft: #142943;
  --purple-soft: #241a3d;

  --chart-1: #8385ff;
  --chart-2: #b26bff;
  --chart-3: #ff7ec4;
  --chart-4: #fbbf24;
  --chart-5: #34d399;
  --chart-6: #94a3b8;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);
  --shadow-card-hover: 0 16px 38px rgba(131, 133, 255, 0.28);
  --shadow-glow: 0 0 0 4px var(--accent-soft);

  --gradient-hero: linear-gradient(120deg, #4640c4 0%, #6d2fb0 48%, #b8317e 100%);
  --gradient-mesh:
    radial-gradient(circle at 12% 15%, rgba(131, 133, 255, 0.22), transparent 40%),
    radial-gradient(circle at 88% 10%, rgba(255, 126, 196, 0.16), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(178, 107, 255, 0.16), transparent 45%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c0e15;
    --bg-elev: #141724;
    --bg-card: #161a29;
    --bg-input: #10121d;
    --bg-hover: #1e2232;
    --text: #f0f2fa;
    --text-dim: #a7adc0;
    --text-faint: #6d7690;
    --border: #262b3d;
    --border-strong: #343b54;
    --accent: #8385ff;
    --accent-2: #b26bff;
    --accent-3: #ff7ec4;
    --accent-soft: #23264a;
    --success: #34d399;
    --success-soft: #0f2c22;
    --warning: #fbbf24;
    --warning-soft: #332506;
    --danger: #f87171;
    --danger-soft: #3a1616;
    --info: #60a5fa;
    --info-soft: #142943;
    --purple-soft: #241a3d;

    --chart-1: #8385ff;
    --chart-2: #b26bff;
    --chart-3: #ff7ec4;
    --chart-4: #fbbf24;
    --chart-5: #34d399;
    --chart-6: #94a3b8;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);
    --shadow-card-hover: 0 16px 38px rgba(131, 133, 255, 0.28);
    --shadow-glow: 0 0 0 4px var(--accent-soft);

    --gradient-hero: linear-gradient(120deg, #4640c4 0%, #6d2fb0 48%, #b8317e 100%);
    --gradient-mesh:
      radial-gradient(circle at 12% 15%, rgba(131, 133, 255, 0.22), transparent 40%),
      radial-gradient(circle at 88% 10%, rgba(255, 126, 196, 0.16), transparent 40%),
      radial-gradient(circle at 50% 100%, rgba(178, 107, 255, 0.16), transparent 45%);
  }
}