:root, [data-theme="purple"] {
  /* ── Brand Colors ── */
  --color-primary: hsl(245, 58%, 51%);
  --color-primary-light: hsl(245, 58%, 62%);
  --color-primary-dark: hsl(245, 58%, 42%);
  --color-primary-subtle: hsl(245, 58%, 95%);
  --color-primary-ghost: hsl(245, 58%, 97%);
}

[data-theme="blue"] {
  --color-primary: hsl(210, 100%, 50%);
  --color-primary-light: hsl(210, 100%, 65%);
  --color-primary-dark: hsl(210, 100%, 40%);
  --color-primary-subtle: hsl(210, 100%, 95%);
  --color-primary-ghost: hsl(210, 100%, 97%);
}

[data-theme="green"] {
  --color-primary: hsl(152, 55%, 42%);
  --color-primary-light: hsl(152, 55%, 55%);
  --color-primary-dark: hsl(152, 55%, 32%);
  --color-primary-subtle: hsl(152, 55%, 94%);
  --color-primary-ghost: hsl(152, 55%, 97%);
}

[data-theme="red"] {
  --color-primary: hsl(0, 72%, 51%);
  --color-primary-light: hsl(0, 72%, 65%);
  --color-primary-dark: hsl(0, 72%, 40%);
  --color-primary-subtle: hsl(0, 72%, 95%);
  --color-primary-ghost: hsl(0, 72%, 97%);
}

:root {

  --color-accent: hsl(330, 65%, 55%);
  --color-accent-light: hsl(330, 65%, 68%);
  --color-accent-subtle: hsl(330, 65%, 95%);

  --color-success: hsl(152, 55%, 42%);
  --color-success-subtle: hsl(152, 55%, 94%);
  --color-warning: hsl(38, 92%, 50%);
  --color-warning-subtle: hsl(38, 92%, 94%);
  --color-error: hsl(0, 72%, 51%);
  --color-error-subtle: hsl(0, 72%, 95%);

  /* ── Surfaces (Light Theme) ── */
  --surface-0: hsl(0, 0%, 100%);
  --surface-1: hsl(225, 20%, 98%);
  --surface-2: hsl(225, 16%, 95%);
  --surface-3: hsl(225, 14%, 91%);
  --surface-4: hsl(225, 12%, 87%);

  /* ── Text ── */
  --text-primary: hsl(225, 25%, 12%);
  --text-secondary: hsl(225, 12%, 44%);
  --text-tertiary: hsl(225, 10%, 62%);
  --text-disabled: hsl(225, 8%, 76%);
  --text-inverse: hsl(0, 0%, 100%);
  --text-on-primary: hsl(0, 0%, 100%);

  /* ── Borders ── */
  --border-subtle: hsl(225, 14%, 91%);
  --border-default: hsl(225, 12%, 85%);
  --border-strong: hsl(225, 10%, 72%);
  --border-focus: var(--color-primary);

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px hsla(225, 20%, 10%, 0.04);
  --shadow-sm: 0 1px 3px hsla(225, 20%, 10%, 0.06), 0 1px 2px hsla(225, 20%, 10%, 0.04);
  --shadow-md: 0 4px 6px hsla(225, 20%, 10%, 0.06), 0 2px 4px hsla(225, 20%, 10%, 0.04);
  --shadow-lg: 0 10px 15px hsla(225, 20%, 10%, 0.08), 0 4px 6px hsla(225, 20%, 10%, 0.04);
  --shadow-xl: 0 20px 25px hsla(225, 20%, 10%, 0.1), 0 8px 10px hsla(225, 20%, 10%, 0.04);
  --shadow-glow: 0 0 0 3px hsla(245, 58%, 51%, 0.15);
  --shadow-card-hover: 0 8px 24px hsla(225, 20%, 10%, 0.12);

  /* ── Spacing ── */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* ── Typography ── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;

  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.8125rem;   /* 13px */
  --text-base: 0.875rem;  /* 14px */
  --text-md: 1rem;        /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */

  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;

  /* ── Radius ── */
  --radius-sm: 0.375rem;   /* 6px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  --radius-2xl: 1.25rem;   /* 20px */
  --radius-full: 9999px;

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 350ms;

  /* ── Z-index ── */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;

  /* ── Layout ── */
  --sidebar-width: 240px;
  --sidebar-collapsed: 64px;
  --header-height: 0px;
  --content-max-width: 1200px;
  --card-poster-ratio: 3 / 4.5;
}

/* ── Dark Theme ── */
.theme-dark {
  --surface-0: hsl(225, 25%, 8%);
  --surface-1: hsl(225, 22%, 11%);
  --surface-2: hsl(225, 20%, 15%);
  --surface-3: hsl(225, 18%, 19%);
  --surface-4: hsl(225, 16%, 24%);

  --text-primary: hsl(225, 15%, 92%);
  --text-secondary: hsl(225, 10%, 60%);
  --text-tertiary: hsl(225, 8%, 45%);
  --text-disabled: hsl(225, 6%, 32%);

  --border-subtle: hsl(225, 18%, 16%);
  --border-default: hsl(225, 16%, 22%);
  --border-strong: hsl(225, 14%, 32%);

  --color-primary-subtle: hsl(245, 40%, 18%);
  --color-primary-ghost: hsl(245, 35%, 13%);
  --color-accent-subtle: hsl(330, 40%, 16%);
  --color-success-subtle: hsl(152, 35%, 14%);
  --color-warning-subtle: hsl(38, 50%, 14%);
  --color-error-subtle: hsl(0, 40%, 15%);

  --shadow-xs: 0 1px 2px hsla(0, 0%, 0%, 0.2);
  --shadow-sm: 0 1px 3px hsla(0, 0%, 0%, 0.25), 0 1px 2px hsla(0, 0%, 0%, 0.2);
  --shadow-md: 0 4px 6px hsla(0, 0%, 0%, 0.25), 0 2px 4px hsla(0, 0%, 0%, 0.2);
  --shadow-lg: 0 10px 15px hsla(0, 0%, 0%, 0.3), 0 4px 6px hsla(0, 0%, 0%, 0.2);
  --shadow-xl: 0 20px 25px hsla(0, 0%, 0%, 0.35), 0 8px 10px hsla(0, 0%, 0%, 0.2);
  --shadow-card-hover: 0 8px 24px hsla(0, 0%, 0%, 0.3);
  --shadow-glow: 0 0 0 3px hsla(245, 58%, 51%, 0.25);
}

/* ── OLED Black ── */
.theme-oled {
  --surface-0: hsl(0, 0%, 0%);
  --surface-1: hsl(0, 0%, 5%);
  --surface-2: hsl(0, 0%, 9%);
  --surface-3: hsl(0, 0%, 14%);
  --surface-4: hsl(0, 0%, 18%);

  --text-primary: hsl(0, 0%, 96%);
  --text-secondary: hsl(0, 0%, 65%);
  --text-tertiary: hsl(0, 0%, 50%);
  --text-disabled: hsl(0, 0%, 35%);

  --border-subtle: hsl(0, 0%, 12%);
  --border-default: hsl(0, 0%, 18%);
  --border-strong: hsl(0, 0%, 28%);

  --color-primary-subtle: hsl(245, 40%, 18%);
  --color-primary-ghost: hsl(245, 35%, 13%);
  --color-accent-subtle: hsl(330, 40%, 16%);
  --color-success-subtle: hsl(152, 35%, 14%);
  --color-warning-subtle: hsl(38, 50%, 14%);
  --color-error-subtle: hsl(0, 40%, 15%);
}

/* ── Dracula ── */
.theme-dracula {
  --surface-0: hsl(231, 15%, 18%);
  --surface-1: hsl(231, 15%, 22%);
  --surface-2: hsl(231, 15%, 26%);
  --surface-3: hsl(231, 15%, 30%);
  --surface-4: hsl(231, 15%, 35%);

  --text-primary: hsl(60, 30%, 96%);
  --text-secondary: hsl(225, 27%, 68%);
  --text-tertiary: hsl(225, 27%, 55%);
  --text-disabled: hsl(225, 27%, 40%);

  --border-subtle: hsl(231, 15%, 25%);
  --border-default: hsl(231, 15%, 32%);
  --border-strong: hsl(231, 15%, 45%);

  --color-primary-subtle: hsl(245, 40%, 25%);
  --color-primary-ghost: hsl(245, 35%, 20%);
}

/* ── Nord ── */
.theme-nord {
  --surface-0: hsl(220, 16%, 22%);
  --surface-1: hsl(222, 16%, 28%);
  --surface-2: hsl(220, 16%, 32%);
  --surface-3: hsl(220, 17%, 36%);
  --surface-4: hsl(220, 17%, 40%);

  --text-primary: hsl(218, 27%, 92%);
  --text-secondary: hsl(218, 27%, 75%);
  --text-tertiary: hsl(218, 27%, 60%);
  --text-disabled: hsl(218, 27%, 45%);

  --border-subtle: hsl(220, 16%, 30%);
  --border-default: hsl(220, 16%, 36%);
  --border-strong: hsl(220, 16%, 48%);
}

/* ── Catppuccin ── */
.theme-catppuccin {
  --surface-0: hsl(240, 21%, 15%);
  --surface-1: hsl(240, 21%, 19%);
  --surface-2: hsl(240, 21%, 23%);
  --surface-3: hsl(240, 21%, 28%);
  --surface-4: hsl(240, 21%, 32%);

  --text-primary: hsl(226, 64%, 88%);
  --text-secondary: hsl(227, 43%, 72%);
  --text-tertiary: hsl(228, 24%, 55%);
  --text-disabled: hsl(229, 15%, 40%);

  --border-subtle: hsl(240, 21%, 22%);
  --border-default: hsl(240, 21%, 28%);
  --border-strong: hsl(240, 21%, 40%);
}

/* ── Tokyo Night ── */
.theme-tokyo {
  --surface-0: hsl(235, 19%, 13%);
  --surface-1: hsl(235, 19%, 17%);
  --surface-2: hsl(235, 19%, 21%);
  --surface-3: hsl(235, 19%, 25%);
  --surface-4: hsl(235, 19%, 30%);

  --text-primary: hsl(220, 31%, 85%);
  --text-secondary: hsl(220, 21%, 65%);
  --text-tertiary: hsl(220, 15%, 50%);
  --text-disabled: hsl(220, 10%, 35%);

  --border-subtle: hsl(235, 19%, 20%);
  --border-default: hsl(235, 19%, 26%);
  --border-strong: hsl(235, 19%, 38%);
}