/* ========================================
   Theme Variables
   ======================================== */

:root,
[data-theme="light"] {
    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-primary-light: #dbeafe;
    --color-secondary: #64748b;
    --color-success: #16a34a;
    --color-success-light: #dcfce7;
    --color-warning: #d97706;
    --color-warning-light: #fef3c7;
    --color-error: #dc2626;
    --color-error-light: #fee2e2;

    --color-bg: #ffffff;
    --color-bg-secondary: #f1f5f9;
    --color-bg-tertiary: #e2e8f0;
    --color-surface: #ffffff;
    --color-surface-hover: #f8fafc;
    --color-border: #e2e8f0;
    --color-border-hover: #cbd5e1;

    --color-text: #0f172a;
    --color-text-secondary: #475569;
    --color-text-muted: #94a3b8;
    --color-text-inverse: #ffffff;

    --color-shadow: rgba(15, 23, 42, 0.08);
    --color-shadow-lg: rgba(15, 23, 42, 0.12);
    --color-overlay: rgba(15, 23, 42, 0.5);
    --header-bg: rgba(255, 255, 255, 0.92);
}

[data-theme="dark"] {
    --color-primary: #3b82f6;
    --color-primary-hover: #60a5fa;
    --color-primary-light: #1e3a5f;
    --color-secondary: #94a3b8;
    --color-success: #4ade80;
    --color-success-light: #052e16;
    --color-warning: #fbbf24;
    --color-warning-light: #422006;
    --color-error: #f87171;
    --color-error-light: #450a0a;

    --color-bg: #1e293b;
    --color-bg-secondary: #111827;
    --color-bg-tertiary: #0f172a;
    --color-surface: #1e293b;
    --color-surface-hover: #263548;
    --color-border: #334155;
    --color-border-hover: #475569;

    --color-text: #f1f5f9;
    --color-text-secondary: #94a3b8;
    --color-text-muted: #64748b;
    --color-text-inverse: #0f172a;

    --color-shadow: rgba(0, 0, 0, 0.3);
    --color-shadow-lg: rgba(0, 0, 0, 0.5);
    --color-overlay: rgba(0, 0, 0, 0.6);
    --header-bg: rgba(30, 41, 59, 0.92);
}

[data-theme="lavender"] {
    --color-primary: #7c3aed;
    --color-primary-hover: #6d28d9;
    --color-primary-light: #f0edfe;
    --color-secondary: #7c6b9e;
    --color-success: #22c55e;
    --color-success-light: #dcfce7;
    --color-warning: #d4920a;
    --color-warning-light: #fef3c7;
    --color-error: #dc3545;
    --color-error-light: #fee2e2;

    --color-bg: #f4ecfb;
    --color-bg-secondary: #e9e0f4;
    --color-bg-tertiary: #ddd1ec;
    --color-surface: #f4ecfb;
    --color-surface-hover: #eaddf5;
    --color-border: #bda9d3;
    --color-border-hover: #a58cc1;

    --color-text: #2d1654;
    --color-text-secondary: #5a4478;
    --color-text-muted: #9890a8;
    --color-text-inverse: #ffffff;

    --color-shadow: rgba(59, 7, 100, 0.06);
    --color-shadow-lg: rgba(59, 7, 100, 0.1);
    --color-overlay: rgba(59, 7, 100, 0.4);
    --header-bg: rgba(244, 236, 251, 0.92);
}

[data-theme="mint"] {
    --color-primary: #059669;
    --color-primary-hover: #047857;
    --color-primary-light: #e2f5ee;
    --color-secondary: #5e9a85;
    --color-success: #16a34a;
    --color-success-light: #dcfce7;
    --color-warning: #d4920a;
    --color-warning-light: #fef3c7;
    --color-error: #dc3545;
    --color-error-light: #ffe4e6;

    --color-bg: #ecf6f1;
    --color-bg-secondary: #dfeee6;
    --color-bg-tertiary: #d1e4da;
    --color-surface: #ecf6f1;
    --color-surface-hover: #e0efe7;
    --color-border: #a7c7b6;
    --color-border-hover: #8fb59f;

    --color-text: #1a3d37;
    --color-text-secondary: #2d5a50;
    --color-text-muted: #8fa8a0;
    --color-text-inverse: #ffffff;

    --color-shadow: rgba(19, 78, 74, 0.06);
    --color-shadow-lg: rgba(19, 78, 74, 0.1);
    --color-overlay: rgba(19, 78, 74, 0.4);
    --header-bg: rgba(236, 246, 241, 0.92);
}

[data-theme="peach"] {
    --color-primary: #c9365a;
    --color-primary-hover: #a82d4c;
    --color-primary-light: #f5e3e7;
    --color-secondary: #b87080;
    --color-success: #22c55e;
    --color-success-light: #dcfce7;
    --color-warning: #d4920a;
    --color-warning-light: #fef3c7;
    --color-error: #c93030;
    --color-error-light: #fee2e2;

    --color-bg: #f6eaed;
    --color-bg-secondary: #f0e1e4;
    --color-bg-tertiary: #e6d2d8;
    --color-surface: #f6eaed;
    --color-surface-hover: #efdde2;
    --color-border: #c8a7b2;
    --color-border-hover: #b38896;

    --color-text: #3d1525;
    --color-text-secondary: #6b3048;
    --color-text-muted: #a8909a;
    --color-text-inverse: #ffffff;

    --color-shadow: rgba(76, 5, 25, 0.06);
    --color-shadow-lg: rgba(76, 5, 25, 0.1);
    --color-overlay: rgba(76, 5, 25, 0.4);
    --header-bg: rgba(246, 234, 237, 0.92);
}

[data-theme="sky"] {
    --color-primary: #0878b5;
    --color-primary-hover: #06629a;
    --color-primary-light: #e4eff7;
    --color-secondary: #5e93b0;
    --color-success: #14b8a6;
    --color-success-light: #ccfbf1;
    --color-warning: #d4920a;
    --color-warning-light: #fef3c7;
    --color-error: #dc4565;
    --color-error-light: #ffe4e6;

    --color-bg: #ebf3f9;
    --color-bg-secondary: #dce8f1;
    --color-bg-tertiary: #ceddea;
    --color-surface: #ebf3f9;
    --color-surface-hover: #deebf4;
    --color-border: #9ebbd0;
    --color-border-hover: #82a8c2;

    --color-text: #183d54;
    --color-text-secondary: #2e5d78;
    --color-text-muted: #8da4b4;
    --color-text-inverse: #ffffff;

    --color-shadow: rgba(12, 74, 110, 0.06);
    --color-shadow-lg: rgba(12, 74, 110, 0.1);
    --color-overlay: rgba(12, 74, 110, 0.4);
    --header-bg: rgba(235, 243, 249, 0.92);
}

[data-theme="beige"] {
    --color-primary: #9a7b2f;
    --color-primary-hover: #856927;
    --color-primary-light: #f5eed8;
    --color-secondary: #8b7a58;
    --color-success: #5b9a55;
    --color-success-light: #e6f4e1;
    --color-warning: #c08a2a;
    --color-warning-light: #fff3dc;
    --color-error: #c25555;
    --color-error-light: #fde9e9;

    --color-bg: #efe4ca;
    --color-bg-secondary: #e3dac3;
    --color-bg-tertiary: #d8ccb0;
    --color-surface: #efe4ca;
    --color-surface-hover: #e5d7b5;
    --color-border: #b79f71;
    --color-border-hover: #a28758;

    --color-text: #3f3728;
    --color-text-secondary: #645842;
    --color-text-muted: #9a8c72;
    --color-text-inverse: #ffffff;

    --color-shadow: rgba(85, 66, 30, 0.08);
    --color-shadow-lg: rgba(85, 66, 30, 0.14);
    --color-overlay: rgba(70, 55, 28, 0.38);
    --header-bg: rgba(239, 228, 202, 0.92);
}