/**
 * VetPOP Core Themes v3.0
 *
 * Core themes loaded on every page (fast, essential):
 * - Default (Light/Dark) - Brand theme
 * - Cupcake (Light/Dark) - Friendly, approachable
 * - Emerald (Light/Dark) - Professional, trustworthy (veterinary green)
 * - Synthwave (Light/Dark) - Bold, modern
 * - Dracula (Light/Dark) - Popular, proven dark theme
 * - Ocean (Light/Dark) - Calming, veterinary-friendly
 * - 4 Colorblind-Accessible (Light/Dark each)
 *
 * Extended themes in themes-extended.css (lazy-loaded on demand)
 *
 * Total Core: 11 themes × 2 variants = 22 theme combinations
 * File size: ~900 lines, ~8KB (very performant)
 */

/* ============================================================================
   DEFAULT THEME - Modern Blue-Purple (Your Brand)
   ============================================================================ */

:root,
[data-theme="default"],
[data-theme="default"][data-variant="light"] {
    --brand-primary-from: #2563eb;
    --brand-primary-to: #9333ea;
    --brand-primary-from-hover: #1d4ed8;
    --brand-primary-to-hover: #7e22ce;

    --color-primary: oklch(55% 0.25 260);
    --color-primary-alpha: oklch(55% 0.25 260 / 0.15);
    --color-primary-content: oklch(98% 0.01 260);
    --color-secondary: oklch(65% 0.20 300);
    --color-secondary-content: oklch(98% 0.01 300);
    --color-accent: oklch(70% 0.25 200);
    --color-accent-content: oklch(20% 0.05 200);
    --color-neutral: oklch(25% 0.02 260);
    --color-neutral-content: oklch(98% 0.01 260);

    --color-background: oklch(100% 0 0);
    --color-background-alt: oklch(99% 0 0);
    --color-surface: oklch(100% 0 0);
    --color-surface-elevated: oklch(97% 0.005 260);

    --color-text-primary: oklch(20% 0.02 260);
    --color-text-secondary: oklch(50% 0.01 260);
    --color-text-muted: oklch(65% 0.01 260);
    --color-text-inverse: oklch(98% 0.01 260);

    --color-border: oklch(90% 0.005 260);
    --color-border-focus: oklch(55% 0.25 260);
    --color-border-error: oklch(60% 0.25 10);

    --color-success: oklch(60% 0.20 145);
    --color-success-bg: oklch(95% 0.10 145);
    --color-error: oklch(60% 0.25 10);
    --color-error-bg: oklch(95% 0.10 10);
    --color-warning: oklch(75% 0.20 85);
    --color-warning-bg: oklch(95% 0.10 85);
    --color-info: oklch(60% 0.20 240);
    --color-info-bg: oklch(95% 0.10 240);

    --password-checklist-bg-from: oklch(98% 0.01 260);
    --password-checklist-bg-to: oklch(97% 0.02 300);
    --password-checklist-border: oklch(88% 0.02 260);

    /* Section Header Gradients - Distinctive colors for each settings section */
    --section-appearance-from: #f59e0b;
    --section-appearance-to: #d97706;
    --section-integrations-from: #3b82f6;
    --section-integrations-to: #06b6d4;
    --section-notifications-from: #8b5cf6;
    --section-notifications-to: #7c3aed;
    --section-team-from: #10b981;
    --section-team-to: #059669;
    --section-roles-from: #14b8a6;
    --section-roles-to: #0891b2;
    --section-security-from: #ef4444;
    --section-security-to: #dc2626;
    --section-advanced-from: #6366f1;
    --section-advanced-to: #4f46e5;
}

[data-theme="default"][data-variant="dark"] {
    --brand-primary-from: #3b82f6;
    --brand-primary-to: #a855f7;
    --brand-primary-from-hover: #2563eb;
    --brand-primary-to-hover: #9333ea;

    --color-primary: oklch(65% 0.25 260);
    --color-primary-alpha: oklch(65% 0.25 260 / 0.15);
    --color-primary-content: oklch(98% 0.01 260);
    --color-secondary: oklch(70% 0.20 300);
    --color-secondary-content: oklch(98% 0.01 300);
    --color-accent: oklch(75% 0.25 200);
    --color-accent-content: oklch(20% 0.05 200);
    --color-neutral: oklch(30% 0.02 260);
    --color-neutral-content: oklch(98% 0.01 260);

    --color-background: oklch(15% 0.02 260);
    --color-background-alt: oklch(18% 0.02 260);
    --color-surface: oklch(20% 0.02 260);
    --color-surface-elevated: oklch(25% 0.02 260);

    --color-text-primary: oklch(95% 0.01 260);
    --color-text-secondary: oklch(75% 0.01 260);
    --color-text-muted: oklch(60% 0.01 260);
    --color-text-inverse: oklch(20% 0.02 260);

    --color-border: oklch(30% 0.02 260);
    --color-border-focus: oklch(65% 0.25 260);
    --color-border-error: oklch(65% 0.25 10);

    --color-success: oklch(70% 0.20 145);
    --color-success-bg: oklch(25% 0.10 145);
    --color-error: oklch(70% 0.25 10);
    --color-error-bg: oklch(25% 0.10 10);
    --color-warning: oklch(80% 0.20 85);
    --color-warning-bg: oklch(25% 0.10 85);
    --color-info: oklch(70% 0.20 240);
    --color-info-bg: oklch(25% 0.10 240);

    --password-checklist-bg-from: oklch(22% 0.02 260);
    --password-checklist-bg-to: oklch(25% 0.02 300);
    --password-checklist-border: oklch(32% 0.02 260);

    /* Section Header Gradients - Slightly brighter for dark mode visibility */
    --section-appearance-from: #fb923c;
    --section-appearance-to: #f59e0b;
    --section-integrations-from: #60a5fa;
    --section-integrations-to: #22d3ee;
    --section-notifications-from: #a78bfa;
    --section-notifications-to: #9333ea;
    --section-team-from: #34d399;
    --section-team-to: #10b981;
    --section-roles-from: #2dd4bf;
    --section-roles-to: #14b8a6;
    --section-security-from: #f87171;
    --section-security-to: #ef4444;
    --section-advanced-from: #818cf8;
    --section-advanced-to: #6366f1;
}

/* ============================================================================
   CUPCAKE - Pastel Pink & Blue (Friendly, Approachable)
   ============================================================================ */

[data-theme="cupcake"],
[data-theme="cupcake"][data-variant="light"] {
    --brand-primary-from: #ec4899;
    --brand-primary-to: #8b5cf6;
    --brand-primary-from-hover: #db2777;
    --brand-primary-to-hover: #7c3aed;

    --color-primary: oklch(72% 0.20 330);
    --color-primary-content: oklch(25% 0.02 330);
    --color-secondary: oklch(70% 0.15 190);
    --color-secondary-content: oklch(25% 0.02 190);
    --color-accent: oklch(85% 0.15 85);
    --color-accent-content: oklch(25% 0.05 85);
    --color-neutral: oklch(30% 0.02 270);
    --color-neutral-content: oklch(98% 0.01 270);

    --color-background: oklch(100% 0 0);
    --color-background-alt: oklch(98% 0.01 330);
    --color-surface: oklch(100% 0 0);
    --color-surface-elevated: oklch(96% 0.02 330);

    --color-text-primary: oklch(25% 0.02 270);
    --color-text-secondary: oklch(50% 0.01 270);
    --color-text-muted: oklch(65% 0.01 270);
    --color-text-inverse: oklch(98% 0.01 330);

    --color-border: oklch(90% 0.02 330);
    --color-border-focus: oklch(72% 0.20 330);
    --color-border-error: oklch(65% 0.25 10);

    --color-success: oklch(65% 0.20 145);
    --color-success-bg: oklch(95% 0.10 145);
    --color-error: oklch(65% 0.25 10);
    --color-error-bg: oklch(95% 0.10 10);
    --color-warning: oklch(80% 0.20 85);
    --color-warning-bg: oklch(95% 0.10 85);
    --color-info: oklch(65% 0.20 240);
    --color-info-bg: oklch(95% 0.10 240);

    --password-checklist-bg-from: oklch(98% 0.01 330);
    --password-checklist-bg-to: oklch(97% 0.02 190);
    --password-checklist-border: oklch(88% 0.03 330);

    /* Section Header Gradients - Pastel colors matching cupcake theme */
    --section-appearance-from: #f9a8d4;
    --section-appearance-to: #ec4899;
    --section-integrations-from: #93c5fd;
    --section-integrations-to: #60a5fa;
    --section-notifications-from: #c4b5fd;
    --section-notifications-to: #a78bfa;
    --section-team-from: #86efac;
    --section-team-to: #4ade80;
    --section-roles-from: #5eead4;
    --section-roles-to: #2dd4bf;
    --section-security-from: #fca5a5;
    --section-security-to: #f87171;
    --section-advanced-from: #a5b4fc;
    --section-advanced-to: #818cf8;
}

[data-theme="cupcake"][data-variant="dark"] {
    --brand-primary-from: #f472b6;
    --brand-primary-to: #a78bfa;
    --brand-primary-from-hover: #ec4899;
    --brand-primary-to-hover: #8b5cf6;

    --color-primary: oklch(75% 0.20 330);
    --color-primary-content: oklch(98% 0.01 330);
    --color-secondary: oklch(75% 0.15 190);
    --color-secondary-content: oklch(98% 0.01 190);
    --color-accent: oklch(85% 0.15 85);
    --color-accent-content: oklch(25% 0.05 85);
    --color-neutral: oklch(30% 0.02 270);
    --color-neutral-content: oklch(98% 0.01 270);

    --color-background: oklch(18% 0.02 330);
    --color-background-alt: oklch(20% 0.02 330);
    --color-surface: oklch(22% 0.02 330);
    --color-surface-elevated: oklch(26% 0.02 330);

    --color-text-primary: oklch(95% 0.01 330);
    --color-text-secondary: oklch(75% 0.01 330);
    --color-text-muted: oklch(60% 0.01 330);
    --color-text-inverse: oklch(22% 0.02 330);

    --color-border: oklch(32% 0.02 330);
    --color-border-focus: oklch(75% 0.20 330);
    --color-border-error: oklch(70% 0.25 10);

    --color-success: oklch(70% 0.20 145);
    --color-success-bg: oklch(25% 0.10 145);
    --color-error: oklch(70% 0.25 10);
    --color-error-bg: oklch(25% 0.10 10);
    --color-warning: oklch(80% 0.20 85);
    --color-warning-bg: oklch(25% 0.10 85);
    --color-info: oklch(70% 0.20 240);
    --color-info-bg: oklch(25% 0.10 240);

    --password-checklist-bg-from: oklch(24% 0.02 330);
    --password-checklist-bg-to: oklch(26% 0.02 190);
    --password-checklist-border: oklch(34% 0.03 330);

    /* Section Header Gradients - Brighter pastels for dark mode */
    --section-appearance-from: #f9a8d4;
    --section-appearance-to: #f472b6;
    --section-integrations-from: #93c5fd;
    --section-integrations-to: #3b82f6;
    --section-notifications-from: #c4b5fd;
    --section-notifications-to: #a78bfa;
    --section-team-from: #86efac;
    --section-team-to: #10b981;
    --section-roles-from: #5eead4;
    --section-roles-to: #14b8a6;
    --section-security-from: #fca5a5;
    --section-security-to: #ef4444;
    --section-advanced-from: #a5b4fc;
    --section-advanced-to: #6366f1;
}

/* ============================================================================
   EMERALD - Professional Green (Trustworthy, Veterinary)
   ============================================================================ */

[data-theme="emerald"],
[data-theme="emerald"][data-variant="light"] {
    --brand-primary-from: #059669;
    --brand-primary-to: #047857;
    --brand-primary-from-hover: #047857;
    --brand-primary-to-hover: #065f46;

    --color-primary: oklch(58% 0.20 165);
    --color-primary-content: oklch(98% 0.01 165);
    --color-secondary: oklch(60% 0.15 240);
    --color-secondary-content: oklch(98% 0.01 240);
    --color-accent: oklch(70% 0.25 85);
    --color-accent-content: oklch(25% 0.05 85);
    --color-neutral: oklch(28% 0.02 160);
    --color-neutral-content: oklch(98% 0.01 160);

    --color-background: oklch(100% 0 0);
    --color-background-alt: oklch(98% 0.01 165);
    --color-surface: oklch(100% 0 0);
    --color-surface-elevated: oklch(96% 0.02 165);

    --color-text-primary: oklch(25% 0.02 160);
    --color-text-secondary: oklch(50% 0.01 160);
    --color-text-muted: oklch(65% 0.01 160);
    --color-text-inverse: oklch(98% 0.01 165);

    --color-border: oklch(90% 0.02 165);
    --color-border-focus: oklch(58% 0.20 165);
    --color-border-error: oklch(60% 0.25 10);

    --color-success: oklch(60% 0.20 145);
    --color-success-bg: oklch(95% 0.10 145);
    --color-error: oklch(60% 0.25 10);
    --color-error-bg: oklch(95% 0.10 10);
    --color-warning: oklch(75% 0.20 85);
    --color-warning-bg: oklch(95% 0.10 85);
    --color-info: oklch(60% 0.20 240);
    --color-info-bg: oklch(95% 0.10 240);

    --password-checklist-bg-from: oklch(98% 0.01 165);
    --password-checklist-bg-to: oklch(97% 0.02 240);
    --password-checklist-border: oklch(88% 0.03 165);

    /* Section Header Gradients - Professional green theme */
    --section-appearance-from: #34d399;
    --section-appearance-to: #10b981;
    --section-integrations-from: #06b6d4;
    --section-integrations-to: #0891b2;
    --section-notifications-from: #a78bfa;
    --section-notifications-to: #8b5cf6;
    --section-team-from: #10b981;
    --section-team-to: #059669;
    --section-roles-from: #14b8a6;
    --section-roles-to: #0891b2;
    --section-security-from: #f59e0b;
    --section-security-to: #d97706;
    --section-advanced-from: #6366f1;
    --section-advanced-to: #4f46e5;
}

[data-theme="emerald"][data-variant="dark"] {
    --brand-primary-from: #10b981;
    --brand-primary-to: #059669;
    --brand-primary-from-hover: #059669;
    --brand-primary-to-hover: #047857;

    --color-primary: oklch(68% 0.20 165);
    --color-primary-content: oklch(98% 0.01 165);
    --color-secondary: oklch(68% 0.15 240);
    --color-secondary-content: oklch(98% 0.01 240);
    --color-accent: oklch(75% 0.25 85);
    --color-accent-content: oklch(25% 0.05 85);
    --color-neutral: oklch(28% 0.02 160);
    --color-neutral-content: oklch(98% 0.01 160);

    --color-background: oklch(15% 0.02 165);
    --color-background-alt: oklch(18% 0.02 165);
    --color-surface: oklch(20% 0.02 165);
    --color-surface-elevated: oklch(25% 0.02 165);

    --color-text-primary: oklch(95% 0.01 165);
    --color-text-secondary: oklch(75% 0.01 165);
    --color-text-muted: oklch(60% 0.01 165);
    --color-text-inverse: oklch(20% 0.02 165);

    --color-border: oklch(30% 0.02 165);
    --color-border-focus: oklch(68% 0.20 165);
    --color-border-error: oklch(65% 0.25 10);

    --color-success: oklch(70% 0.20 145);
    --color-success-bg: oklch(25% 0.10 145);
    --color-error: oklch(70% 0.25 10);
    --color-error-bg: oklch(25% 0.10 10);
    --color-warning: oklch(80% 0.20 85);
    --color-warning-bg: oklch(25% 0.10 85);
    --color-info: oklch(70% 0.20 240);
    --color-info-bg: oklch(25% 0.10 240);

    --password-checklist-bg-from: oklch(22% 0.02 165);
    --password-checklist-bg-to: oklch(25% 0.02 240);
    --password-checklist-border: oklch(32% 0.03 165);

    /* Section Header Gradients - Brighter greens for dark mode */
    --section-appearance-from: #6ee7b7;
    --section-appearance-to: #34d399;
    --section-integrations-from: #22d3ee;
    --section-integrations-to: #06b6d4;
    --section-notifications-from: #c084fc;
    --section-notifications-to: #a78bfa;
    --section-team-from: #34d399;
    --section-team-to: #10b981;
    --section-roles-from: #5eead4;
    --section-roles-to: #14b8a6;
    --section-security-from: #fbbf24;
    --section-security-to: #f59e0b;
    --section-advanced-from: #818cf8;
    --section-advanced-to: #6366f1;
}

/* ============================================================================
   SYNTHWAVE - Bold Modern (Neon Pink/Cyan, Retro 80s)
   ============================================================================ */

[data-theme="synthwave"],
[data-theme="synthwave"][data-variant="light"] {
    --brand-primary-from: #e879f9;
    --brand-primary-to: #06b6d4;
    --brand-primary-from-hover: #d946ef;
    --brand-primary-to-hover: #0891b2;

    --color-primary: oklch(75% 0.28 320);
    --color-primary-content: oklch(20% 0.05 320);
    --color-secondary: oklch(75% 0.22 195);
    --color-secondary-content: oklch(20% 0.05 195);
    --color-accent: oklch(85% 0.18 85);
    --color-accent-content: oklch(25% 0.05 85);
    --color-neutral: oklch(28% 0.03 290);
    --color-neutral-content: oklch(98% 0.01 290);

    --color-background: oklch(98% 0.005 320);
    --color-background-alt: oklch(96% 0.01 320);
    --color-surface: oklch(100% 0 0);
    --color-surface-elevated: oklch(94% 0.015 320);

    --color-text-primary: oklch(25% 0.03 290);
    --color-text-secondary: oklch(50% 0.02 290);
    --color-text-muted: oklch(65% 0.01 290);
    --color-text-inverse: oklch(98% 0.01 320);

    --color-border: oklch(88% 0.02 320);
    --color-border-focus: oklch(75% 0.28 320);
    --color-border-error: oklch(65% 0.25 10);

    --color-success: oklch(65% 0.20 145);
    --color-success-bg: oklch(95% 0.10 145);
    --color-error: oklch(65% 0.25 10);
    --color-error-bg: oklch(95% 0.10 10);
    --color-warning: oklch(80% 0.20 85);
    --color-warning-bg: oklch(95% 0.10 85);
    --color-info: oklch(70% 0.22 195);
    --color-info-bg: oklch(95% 0.10 195);

    --password-checklist-bg-from: oklch(97% 0.02 320);
    --password-checklist-bg-to: oklch(96% 0.02 195);
    --password-checklist-border: oklch(86% 0.04 320);

    /* Section Header Gradients - Neon theme colors */
    --section-appearance-from: #f472b6;
    --section-appearance-to: #ec4899;
    --section-integrations-from: #22d3ee;
    --section-integrations-to: #06b6d4;
    --section-notifications-from: #c084fc;
    --section-notifications-to: #a855f7;
    --section-team-from: #4ade80;
    --section-team-to: #22c55e;
    --section-roles-from: #2dd4bf;
    --section-roles-to: #14b8a6;
    --section-security-from: #fb923c;
    --section-security-to: #f97316;
    --section-advanced-from: #a78bfa;
    --section-advanced-to: #8b5cf6;
}

[data-theme="synthwave"][data-variant="dark"] {
    --brand-primary-from: #f0abfc;
    --brand-primary-to: #22d3ee;
    --brand-primary-from-hover: #e879f9;
    --brand-primary-to-hover: #06b6d4;

    --color-primary: oklch(80% 0.28 320);
    --color-primary-content: oklch(20% 0.05 320);
    --color-secondary: oklch(80% 0.22 195);
    --color-secondary-content: oklch(20% 0.05 195);
    --color-accent: oklch(88% 0.18 85);
    --color-accent-content: oklch(25% 0.05 85);
    --color-neutral: oklch(25% 0.03 290);
    --color-neutral-content: oklch(98% 0.01 290);

    --color-background: oklch(12% 0.03 290);
    --color-background-alt: oklch(15% 0.03 290);
    --color-surface: oklch(18% 0.03 290);
    --color-surface-elevated: oklch(22% 0.03 290);

    --color-text-primary: oklch(95% 0.02 320);
    --color-text-secondary: oklch(78% 0.02 320);
    --color-text-muted: oklch(62% 0.02 320);
    --color-text-inverse: oklch(18% 0.03 290);

    --color-border: oklch(28% 0.03 290);
    --color-border-focus: oklch(80% 0.28 320);
    --color-border-error: oklch(70% 0.25 10);

    --color-success: oklch(72% 0.20 145);
    --color-success-bg: oklch(22% 0.10 145);
    --color-error: oklch(72% 0.25 10);
    --color-error-bg: oklch(22% 0.10 10);
    --color-warning: oklch(82% 0.20 85);
    --color-warning-bg: oklch(22% 0.10 85);
    --color-info: oklch(75% 0.22 195);
    --color-info-bg: oklch(22% 0.10 195);

    --password-checklist-bg-from: oklch(20% 0.03 290);
    --password-checklist-bg-to: oklch(22% 0.03 195);
    --password-checklist-border: oklch(30% 0.05 320);

    /* Section Header Gradients - Brighter neon for dark mode */
    --section-appearance-from: #f9a8d4;
    --section-appearance-to: #f472b6;
    --section-integrations-from: #67e8f9;
    --section-integrations-to: #22d3ee;
    --section-notifications-from: #d8b4fe;
    --section-notifications-to: #c084fc;
    --section-team-from: #86efac;
    --section-team-to: #4ade80;
    --section-roles-from: #5eead4;
    --section-roles-to: #2dd4bf;
    --section-security-from: #fdba74;
    --section-security-to: #fb923c;
    --section-advanced-from: #c4b5fd;
    --section-advanced-to: #a78bfa;
}

/* ============================================================================
   DRACULA - Popular Dark Theme (Purple, proven classic)
   ============================================================================ */

[data-theme="dracula"],
[data-theme="dracula"][data-variant="light"] {
    --brand-primary-from: #bd93f9;
    --brand-primary-to: #ff79c6;
    --brand-primary-from-hover: #9b6fd8;
    --brand-primary-to-hover: #e651ab;

    --color-primary: oklch(70% 0.22 295);
    --color-primary-content: oklch(20% 0.03 295);
    --color-secondary: oklch(72% 0.24 340);
    --color-secondary-content: oklch(20% 0.03 340);
    --color-accent: oklch(78% 0.20 135);
    --color-accent-content: oklch(20% 0.03 135);
    --color-neutral: oklch(30% 0.02 270);
    --color-neutral-content: oklch(98% 0.01 270);

    --color-background: oklch(98% 0.005 295);
    --color-background-alt: oklch(96% 0.01 295);
    --color-surface: oklch(100% 0 0);
    --color-surface-elevated: oklch(94% 0.015 295);

    --color-text-primary: oklch(25% 0.02 270);
    --color-text-secondary: oklch(50% 0.01 270);
    --color-text-muted: oklch(65% 0.01 270);
    --color-text-inverse: oklch(98% 0.01 295);

    --color-border: oklch(88% 0.02 295);
    --color-border-focus: oklch(70% 0.22 295);
    --color-border-error: oklch(65% 0.25 10);

    --color-success: oklch(70% 0.20 145);
    --color-success-bg: oklch(95% 0.10 145);
    --color-error: oklch(68% 0.25 15);
    --color-error-bg: oklch(95% 0.10 15);
    --color-warning: oklch(82% 0.20 75);
    --color-warning-bg: oklch(95% 0.10 75);
    --color-info: oklch(72% 0.20 230);
    --color-info-bg: oklch(95% 0.10 230);

    --password-checklist-bg-from: oklch(97% 0.02 295);
    --password-checklist-bg-to: oklch(96% 0.02 340);
    --password-checklist-border: oklch(86% 0.04 295);

    /* Section Header Gradients - Dracula theme colors */
    --section-appearance-from: #ff79c6;
    --section-appearance-to: #ff5ac1;
    --section-integrations-from: #8be9fd;
    --section-integrations-to: #5ddef4;
    --section-notifications-from: #bd93f9;
    --section-notifications-to: #9c6fdb;
    --section-team-from: #50fa7b;
    --section-team-to: #2fe262;
    --section-roles-from: #8be9fd;
    --section-roles-to: #5ddef4;
    --section-security-from: #ffb86c;
    --section-security-to: #ff9f4d;
    --section-advanced-from: #bd93f9;
    --section-advanced-to: #9c6fdb;
}

[data-theme="dracula"][data-variant="dark"] {
    --brand-primary-from: #bd93f9;
    --brand-primary-to: #ff79c6;
    --brand-primary-from-hover: #9b6fd8;
    --brand-primary-to-hover: #e651ab;

    --color-primary: oklch(75% 0.22 295);
    --color-primary-content: oklch(98% 0.01 295);
    --color-secondary: oklch(78% 0.24 340);
    --color-secondary-content: oklch(98% 0.01 340);
    --color-accent: oklch(82% 0.20 135);
    --color-accent-content: oklch(20% 0.03 135);
    --color-neutral: oklch(25% 0.03 270);
    --color-neutral-content: oklch(96% 0.01 270);

    --color-background: oklch(16% 0.025 270);
    --color-background-alt: oklch(18% 0.025 270);
    --color-surface: oklch(20% 0.025 270);
    --color-surface-elevated: oklch(24% 0.025 270);

    --color-text-primary: oklch(96% 0.01 270);
    --color-text-secondary: oklch(78% 0.01 270);
    --color-text-muted: oklch(62% 0.01 270);
    --color-text-inverse: oklch(20% 0.025 270);

    --color-border: oklch(30% 0.025 270);
    --color-border-focus: oklch(75% 0.22 295);
    --color-border-error: oklch(70% 0.25 15);

    --color-success: oklch(75% 0.20 145);
    --color-success-bg: oklch(24% 0.10 145);
    --color-error: oklch(72% 0.25 15);
    --color-error-bg: oklch(24% 0.10 15);
    --color-warning: oklch(85% 0.20 75);
    --color-warning-bg: oklch(24% 0.10 75);
    --color-info: oklch(76% 0.20 230);
    --color-info-bg: oklch(24% 0.10 230);

    --password-checklist-bg-from: oklch(22% 0.025 270);
    --password-checklist-bg-to: oklch(24% 0.025 340);
    --password-checklist-border: oklch(32% 0.04 295);

    /* Section Header Gradients - Bright Dracula colors for dark mode */
    --section-appearance-from: #ff79c6;
    --section-appearance-to: #ff5ac1;
    --section-integrations-from: #8be9fd;
    --section-integrations-to: #5ddef4;
    --section-notifications-from: #bd93f9;
    --section-notifications-to: #9c6fdb;
    --section-team-from: #50fa7b;
    --section-team-to: #2fe262;
    --section-roles-from: #8be9fd;
    --section-roles-to: #5ddef4;
    --section-security-from: #ffb86c;
    --section-security-to: #ff9f4d;
    --section-advanced-from: #bd93f9;
    --section-advanced-to: #9c6fdb;
}

/* ============================================================================
   OCEAN - Calming Blues (Veterinary-friendly, trustworthy)
   ============================================================================ */

[data-theme="ocean"],
[data-theme="ocean"][data-variant="light"] {
    --brand-primary-from: #0891b2;
    --brand-primary-to: #0e7490;
    --brand-primary-from-hover: #0e7490;
    --brand-primary-to-hover: #155e75;

    --color-primary: oklch(60% 0.18 200);
    --color-primary-content: oklch(98% 0.01 200);
    --color-secondary: oklch(62% 0.16 230);
    --color-secondary-content: oklch(98% 0.01 230);
    --color-accent: oklch(68% 0.18 170);
    --color-accent-content: oklch(20% 0.03 170);
    --color-neutral: oklch(28% 0.02 210);
    --color-neutral-content: oklch(98% 0.01 210);

    --color-background: oklch(100% 0 0);
    --color-background-alt: oklch(98% 0.01 200);
    --color-surface: oklch(100% 0 0);
    --color-surface-elevated: oklch(96% 0.02 200);

    --color-text-primary: oklch(25% 0.02 210);
    --color-text-secondary: oklch(50% 0.01 210);
    --color-text-muted: oklch(65% 0.01 210);
    --color-text-inverse: oklch(98% 0.01 200);

    --color-border: oklch(90% 0.02 200);
    --color-border-focus: oklch(60% 0.18 200);
    --color-border-error: oklch(60% 0.25 10);

    --color-success: oklch(62% 0.20 145);
    --color-success-bg: oklch(95% 0.10 145);
    --color-error: oklch(62% 0.25 10);
    --color-error-bg: oklch(95% 0.10 10);
    --color-warning: oklch(76% 0.20 85);
    --color-warning-bg: oklch(95% 0.10 85);
    --color-info: oklch(64% 0.20 230);
    --color-info-bg: oklch(95% 0.10 230);

    --password-checklist-bg-from: oklch(98% 0.01 200);
    --password-checklist-bg-to: oklch(97% 0.02 230);
    --password-checklist-border: oklch(88% 0.03 200);

    /* Section Header Gradients - Ocean theme colors */
    --section-appearance-from: #06b6d4;
    --section-appearance-to: #0891b2;
    --section-integrations-from: #0ea5e9;
    --section-integrations-to: #0284c7;
    --section-notifications-from: #14b8a6;
    --section-notifications-to: #0d9488;
    --section-team-from: #10b981;
    --section-team-to: #059669;
    --section-roles-from: #06b6d4;
    --section-roles-to: #0e7490;
    --section-security-from: #f59e0b;
    --section-security-to: #d97706;
    --section-advanced-from: #3b82f6;
    --section-advanced-to: #2563eb;
}

[data-theme="ocean"][data-variant="dark"] {
    --brand-primary-from: #06b6d4;
    --brand-primary-to: #0891b2;
    --brand-primary-from-hover: #0891b2;
    --brand-primary-to-hover: #0e7490;

    --color-primary: oklch(70% 0.18 200);
    --color-primary-content: oklch(98% 0.01 200);
    --color-secondary: oklch(72% 0.16 230);
    --color-secondary-content: oklch(98% 0.01 230);
    --color-accent: oklch(74% 0.18 170);
    --color-accent-content: oklch(20% 0.03 170);
    --color-neutral: oklch(28% 0.02 210);
    --color-neutral-content: oklch(98% 0.01 210);

    --color-background: oklch(14% 0.025 210);
    --color-background-alt: oklch(17% 0.025 210);
    --color-surface: oklch(19% 0.025 210);
    --color-surface-elevated: oklch(23% 0.025 210);

    --color-text-primary: oklch(95% 0.01 200);
    --color-text-secondary: oklch(76% 0.01 200);
    --color-text-muted: oklch(61% 0.01 200);
    --color-text-inverse: oklch(19% 0.025 210);

    --color-border: oklch(29% 0.025 210);
    --color-border-focus: oklch(70% 0.18 200);
    --color-border-error: oklch(68% 0.25 10);

    --color-success: oklch(72% 0.20 145);
    --color-success-bg: oklch(23% 0.10 145);
    --color-error: oklch(72% 0.25 10);
    --color-error-bg: oklch(23% 0.10 10);
    --color-warning: oklch(81% 0.20 85);
    --color-warning-bg: oklch(23% 0.10 85);
    --color-info: oklch(74% 0.20 230);
    --color-info-bg: oklch(23% 0.10 230);

    --password-checklist-bg-from: oklch(21% 0.025 210);
    --password-checklist-bg-to: oklch(23% 0.025 230);
    --password-checklist-border: oklch(31% 0.04 200);

    /* Section Header Gradients - Brighter ocean colors for dark mode */
    --section-appearance-from: #22d3ee;
    --section-appearance-to: #06b6d4;
    --section-integrations-from: #38bdf8;
    --section-integrations-to: #0ea5e9;
    --section-notifications-from: #2dd4bf;
    --section-notifications-to: #14b8a6;
    --section-team-from: #34d399;
    --section-team-to: #10b981;
    --section-roles-from: #22d3ee;
    --section-roles-to: #06b6d4;
    --section-security-from: #fbbf24;
    --section-security-to: #f59e0b;
    --section-advanced-from: #60a5fa;
    --section-advanced-to: #3b82f6;
}

/* ============================================================================
   COLORBLIND ACCESSIBLE THEMES (WCAG AAA)
   ============================================================================ */

/* Red-Green Colorblind (Deuteranopia Deuteranopia - Red-Green Colorblind (Most Common) Protanopia) */
[data-theme="colorblind_rg"],
[data-theme="colorblind_rg"][data-variant="light"] {
    --brand-primary-from: #0ea5e9;
    --brand-primary-to: #f59e0b;
    --brand-primary-from-hover: #0284c7;
    --brand-primary-to-hover: #d97706;

    --color-primary: oklch(68% 0.20 230);
    --color-primary-content: oklch(98% 0.01 230);
    --color-secondary: oklch(75% 0.22 85);
    --color-secondary-content: oklch(20% 0.05 85);
    --color-accent: oklch(60% 0.15 270);
    --color-accent-content: oklch(98% 0.01 270);
    --color-neutral: oklch(30% 0.02 240);
    --color-neutral-content: oklch(98% 0.01 240);

    --color-background: oklch(100% 0 0);
    --color-background-alt: oklch(98% 0.01 230);
    --color-surface: oklch(100% 0 0);
    --color-surface-elevated: oklch(96% 0.02 230);

    --color-text-primary: oklch(25% 0.02 240);
    --color-text-secondary: oklch(50% 0.01 240);
    --color-text-muted: oklch(65% 0.01 240);
    --color-text-inverse: oklch(98% 0.01 230);

    --color-border: oklch(90% 0.02 230);
    --color-border-focus: oklch(68% 0.20 230);
    --color-border-error: oklch(75% 0.22 85);

    --color-success: oklch(68% 0.20 230);
    --color-success-bg: oklch(95% 0.10 230);
    --color-error: oklch(75% 0.22 85);
    --color-error-bg: oklch(95% 0.10 85);
    --color-warning: oklch(80% 0.20 75);
    --color-warning-bg: oklch(95% 0.10 75);
    --color-info: oklch(60% 0.15 270);
    --color-info-bg: oklch(95% 0.10 270);

    --password-checklist-bg-from: oklch(98% 0.01 230);
    --password-checklist-bg-to: oklch(97% 0.02 85);
    --password-checklist-border: oklch(88% 0.03 230);

    /* Section Header Gradients - Red-Green colorblind safe (cyan-yellow palette) */
    --section-appearance-from: #f59e0b;
    --section-appearance-to: #d97706;
    --section-integrations-from: #0ea5e9;
    --section-integrations-to: #06b6d4;
    --section-notifications-from: #8b5cf6;
    --section-notifications-to: #7c3aed;
    --section-team-from: #0ea5e9;
    --section-team-to: #0284c7;
    --section-roles-from: #14b8a6;
    --section-roles-to: #0891b2;
    --section-security-from: #f59e0b;
    --section-security-to: #d97706;
    --section-advanced-from: #6366f1;
    --section-advanced-to: #4f46e5;
}

[data-theme="colorblind_rg"][data-variant="dark"] {
    --brand-primary-from: #38bdf8;
    --brand-primary-to: #fbbf24;
    --brand-primary-from-hover: #0ea5e9;
    --brand-primary-to-hover: #f59e0b;

    --color-primary: oklch(75% 0.20 230);
    --color-primary-content: oklch(98% 0.01 230);
    --color-secondary: oklch(80% 0.22 85);
    --color-secondary-content: oklch(20% 0.05 85);
    --color-accent: oklch(68% 0.15 270);
    --color-accent-content: oklch(98% 0.01 270);
    --color-neutral: oklch(28% 0.02 240);
    --color-neutral-content: oklch(98% 0.01 240);

    --color-background: oklch(16% 0.02 240);
    --color-background-alt: oklch(19% 0.02 240);
    --color-surface: oklch(21% 0.02 240);
    --color-surface-elevated: oklch(25% 0.02 240);

    --color-text-primary: oklch(95% 0.01 230);
    --color-text-secondary: oklch(76% 0.01 230);
    --color-text-muted: oklch(62% 0.01 230);
    --color-text-inverse: oklch(21% 0.02 240);

    --color-border: oklch(31% 0.02 240);
    --color-border-focus: oklch(75% 0.20 230);
    --color-border-error: oklch(80% 0.22 85);

    --color-success: oklch(75% 0.20 230);
    --color-success-bg: oklch(25% 0.10 230);
    --color-error: oklch(80% 0.22 85);
    --color-error-bg: oklch(25% 0.10 85);
    --color-warning: oklch(83% 0.20 75);
    --color-warning-bg: oklch(25% 0.10 75);
    --color-info: oklch(72% 0.15 270);
    --color-info-bg: oklch(25% 0.10 270);

    --password-checklist-bg-from: oklch(23% 0.02 240);
    --password-checklist-bg-to: oklch(25% 0.02 85);
    --password-checklist-border: oklch(33% 0.04 230);

    /* Section Header Gradients - Red-Green colorblind safe (brighter for dark mode) */
    --section-appearance-from: #fbbf24;
    --section-appearance-to: #f59e0b;
    --section-integrations-from: #38bdf8;
    --section-integrations-to: #22d3ee;
    --section-notifications-from: #a78bfa;
    --section-notifications-to: #9333ea;
    --section-team-from: #38bdf8;
    --section-team-to: #0ea5e9;
    --section-roles-from: #2dd4bf;
    --section-roles-to: #14b8a6;
    --section-security-from: #fbbf24;
    --section-security-to: #f59e0b;
    --section-advanced-from: #818cf8;
    --section-advanced-to: #6366f1;
}

/* Protanopia - Red-Green Colorblind */
[data-theme="colorblind_by"],
[data-theme="colorblind_by"][data-variant="light"] {
    --brand-primary-from: #ec4899;
    --brand-primary-to: #06b6d4;
    --brand-primary-from-hover: #db2777;
    --brand-primary-to-hover: #0891b2;

    --color-primary: oklch(68% 0.24 340);
    --color-primary-content: oklch(98% 0.01 340);
    --color-secondary: oklch(70% 0.18 195);
    --color-secondary-content: oklch(98% 0.01 195);
    --color-accent: oklch(32% 0.02 340);
    --color-accent-content: oklch(98% 0.01 340);
    --color-neutral: oklch(30% 0.02 330);
    --color-neutral-content: oklch(98% 0.01 330);

    --color-background: oklch(100% 0 0);
    --color-background-alt: oklch(98% 0.01 340);
    --color-surface: oklch(100% 0 0);
    --color-surface-elevated: oklch(96% 0.02 340);

    --color-text-primary: oklch(25% 0.02 330);
    --color-text-secondary: oklch(50% 0.01 330);
    --color-text-muted: oklch(65% 0.01 330);
    --color-text-inverse: oklch(98% 0.01 340);

    --color-border: oklch(90% 0.02 340);
    --color-border-focus: oklch(68% 0.24 340);
    --color-border-error: oklch(68% 0.24 340);

    --color-success: oklch(70% 0.18 195);
    --color-success-bg: oklch(95% 0.10 195);
    --color-error: oklch(68% 0.24 340);
    --color-error-bg: oklch(95% 0.10 340);
    --color-warning: oklch(80% 0.05 0);
    --color-warning-bg: oklch(95% 0.02 0);
    --color-info: oklch(70% 0.18 195);
    --color-info-bg: oklch(95% 0.10 195);

    --password-checklist-bg-from: oklch(98% 0.01 340);
    --password-checklist-bg-to: oklch(97% 0.02 195);
    --password-checklist-border: oklch(88% 0.04 340);

    /* Section Header Gradients - Blue-Yellow colorblind safe (red-cyan palette) */
    --section-appearance-from: #ec4899;
    --section-appearance-to: #db2777;
    --section-integrations-from: #06b6d4;
    --section-integrations-to: #0891b2;
    --section-notifications-from: #a855f7;
    --section-notifications-to: #9333ea;
    --section-team-from: #06b6d4;
    --section-team-to: #0891b2;
    --section-roles-from: #14b8a6;
    --section-roles-to: #0891b2;
    --section-security-from: #ef4444;
    --section-security-to: #dc2626;
    --section-advanced-from: #a855f7;
    --section-advanced-to: #9333ea;
}

[data-theme="colorblind_by"][data-variant="dark"] {
    --brand-primary-from: #f472b6;
    --brand-primary-to: #22d3ee;
    --brand-primary-from-hover: #ec4899;
    --brand-primary-to-hover: #06b6d4;

    --color-primary: oklch(75% 0.24 340);
    --color-primary-content: oklch(98% 0.01 340);
    --color-secondary: oklch(77% 0.18 195);
    --color-secondary-content: oklch(98% 0.01 195);
    --color-accent: oklch(40% 0.02 340);
    --color-accent-content: oklch(98% 0.01 340);
    --color-neutral: oklch(28% 0.02 330);
    --color-neutral-content: oklch(98% 0.01 330);

    --color-background: oklch(16% 0.02 330);
    --color-background-alt: oklch(19% 0.02 330);
    --color-surface: oklch(21% 0.02 330);
    --color-surface-elevated: oklch(25% 0.02 330);

    --color-text-primary: oklch(95% 0.01 340);
    --color-text-secondary: oklch(76% 0.01 340);
    --color-text-muted: oklch(62% 0.01 340);
    --color-text-inverse: oklch(21% 0.02 330);

    --color-border: oklch(31% 0.02 330);
    --color-border-focus: oklch(75% 0.24 340);
    --color-border-error: oklch(75% 0.24 340);

    --color-success: oklch(77% 0.18 195);
    --color-success-bg: oklch(25% 0.10 195);
    --color-error: oklch(75% 0.24 340);
    --color-error-bg: oklch(25% 0.10 340);
    --color-warning: oklch(85% 0.05 0);
    --color-warning-bg: oklch(25% 0.02 0);
    --color-info: oklch(77% 0.18 195);
    --color-info-bg: oklch(25% 0.10 195);

    --password-checklist-bg-from: oklch(23% 0.02 330);
    --password-checklist-bg-to: oklch(25% 0.02 195);
    --password-checklist-border: oklch(33% 0.04 340);

    /* Section Header Gradients - Blue-Yellow colorblind safe (brighter for dark mode) */
    --section-appearance-from: #f472b6;
    --section-appearance-to: #ec4899;
    --section-integrations-from: #22d3ee;
    --section-integrations-to: #06b6d4;
    --section-notifications-from: #c084fc;
    --section-notifications-to: #a855f7;
    --section-team-from: #22d3ee;
    --section-team-to: #06b6d4;
    --section-roles-from: #2dd4bf;
    --section-roles-to: #14b8a6;
    --section-security-from: #f87171;
    --section-security-to: #ef4444;
    --section-advanced-from: #c084fc;
    --section-advanced-to: #a855f7;
}

/* Grayscale - Complete Colorblind (Achromatopsia) */
[data-theme="colorblind_mono"],
[data-theme="colorblind_mono"][data-variant="light"] {
    --brand-primary-from: #374151;
    --brand-primary-to: #1f2937;
    --brand-primary-from-hover: #1f2937;
    --brand-primary-to-hover: #111827;

    --color-primary: oklch(42% 0 0);
    --color-primary-content: oklch(98% 0 0);
    --color-secondary: oklch(58% 0 0);
    --color-secondary-content: oklch(98% 0 0);
    --color-accent: oklch(70% 0 0);
    --color-accent-content: oklch(20% 0 0);
    --color-neutral: oklch(30% 0 0);
    --color-neutral-content: oklch(98% 0 0);

    --color-background: oklch(100% 0 0);
    --color-background-alt: oklch(98% 0 0);
    --color-surface: oklch(100% 0 0);
    --color-surface-elevated: oklch(96% 0 0);

    --color-text-primary: oklch(25% 0 0);
    --color-text-secondary: oklch(50% 0 0);
    --color-text-muted: oklch(65% 0 0);
    --color-text-inverse: oklch(98% 0 0);

    --color-border: oklch(90% 0 0);
    --color-border-focus: oklch(42% 0 0);
    --color-border-error: oklch(35% 0 0);

    --color-success: oklch(50% 0 0);
    --color-success-bg: oklch(95% 0 0);
    --color-error: oklch(35% 0 0);
    --color-error-bg: oklch(95% 0 0);
    --color-warning: oklch(58% 0 0);
    --color-warning-bg: oklch(95% 0 0);
    --color-info: oklch(50% 0 0);
    --color-info-bg: oklch(95% 0 0);

    --password-checklist-bg-from: oklch(98% 0 0);
    --password-checklist-bg-to: oklch(96% 0 0);
    --password-checklist-border: oklch(88% 0 0);

    /* Section Header Gradients - Monochrome grayscale with varying lightness */
    --section-appearance-from: #6b7280;
    --section-appearance-to: #4b5563;
    --section-integrations-from: #4b5563;
    --section-integrations-to: #374151;
    --section-notifications-from: #9ca3af;
    --section-notifications-to: #6b7280;
    --section-team-from: #374151;
    --section-team-to: #1f2937;
    --section-roles-from: #6b7280;
    --section-roles-to: #4b5563;
    --section-security-from: #1f2937;
    --section-security-to: #111827;
    --section-advanced-from: #9ca3af;
    --section-advanced-to: #6b7280;
}

[data-theme="colorblind_mono"][data-variant="dark"] {
    --brand-primary-from: #9ca3af;
    --brand-primary-to: #6b7280;
    --brand-primary-from-hover: #d1d5db;
    --brand-primary-to-hover: #9ca3af;

    --color-primary: oklch(68% 0 0);
    --color-primary-content: oklch(98% 0 0);
    --color-secondary: oklch(58% 0 0);
    --color-secondary-content: oklch(98% 0 0);
    --color-accent: oklch(48% 0 0);
    --color-accent-content: oklch(98% 0 0);
    --color-neutral: oklch(30% 0 0);
    --color-neutral-content: oklch(98% 0 0);

    --color-background: oklch(17% 0 0);
    --color-background-alt: oklch(20% 0 0);
    --color-surface: oklch(22% 0 0);
    --color-surface-elevated: oklch(26% 0 0);

    --color-text-primary: oklch(95% 0 0);
    --color-text-secondary: oklch(75% 0 0);
    --color-text-muted: oklch(60% 0 0);
    --color-text-inverse: oklch(22% 0 0);

    --color-border: oklch(32% 0 0);
    --color-border-focus: oklch(68% 0 0);
    --color-border-error: oklch(75% 0 0);

    --color-success: oklch(68% 0 0);
    --color-success-bg: oklch(26% 0 0);
    --color-error: oklch(75% 0 0);
    --color-error-bg: oklch(26% 0 0);
    --color-warning: oklch(80% 0 0);
    --color-warning-bg: oklch(26% 0 0);
    --color-info: oklch(68% 0 0);
    --color-info-bg: oklch(26% 0 0);

    --password-checklist-bg-from: oklch(24% 0 0);
    --password-checklist-bg-to: oklch(26% 0 0);
    --password-checklist-border: oklch(34% 0 0);

    /* Section Header Gradients - Monochrome grayscale (lighter for dark mode) */
    --section-appearance-from: #9ca3af;
    --section-appearance-to: #6b7280;
    --section-integrations-from: #6b7280;
    --section-integrations-to: #4b5563;
    --section-notifications-from: #d1d5db;
    --section-notifications-to: #9ca3af;
    --section-team-from: #4b5563;
    --section-team-to: #374151;
    --section-roles-from: #9ca3af;
    --section-roles-to: #6b7280;
    --section-security-from: #374151;
    --section-security-to: #1f2937;
    --section-advanced-from: #d1d5db;
    --section-advanced-to: #9ca3af;
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

.bg-brand-gradient {
    background: linear-gradient(to right, var(--brand-primary-from), var(--brand-primary-to));
}

.bg-brand-gradient:hover {
    background: linear-gradient(to right, var(--brand-primary-from-hover), var(--brand-primary-to-hover));
}

.text-brand-gradient {
    background: linear-gradient(to right, var(--brand-primary-from), var(--brand-primary-to));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-normal: 0ms;
        --transition-slow: 0ms;
    }
}