html[data-theme="dark"] {
    --bg-primary: var(--color-gray-950);
    --bg-secondary: var(--color-gray-900);
    --bg-tertiary: var(--color-gray-800);
    --bg-elevated: var(--color-gray-800);

    --text-primary: var(--color-gray-50);
    --text-secondary: var(--color-gray-400);
    --text-tertiary: var(--color-gray-500);
    --text-inverse: var(--color-gray-900);

    --accent: var(--color-accent-400);
    --accent-hover: var(--color-accent-300);
    --accent-light: var(--color-accent-900);
    --accent-bg: rgba(139, 92, 246, 0.1);
    --accent-text: var(--color-accent-300);

    --border: var(--color-gray-700);
    --border-light: var(--color-gray-800);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.3);
    --shadow-accent: 0 4px 20px rgba(139, 92, 246, 0.3);

    --success-bg: rgba(16, 185, 129, 0.1);
    --warning-bg: rgba(245, 158, 11, 0.1);
    --error-bg: rgba(239, 68, 68, 0.1);
    --info-bg: rgba(59, 130, 246, 0.1);
}