/*
 * Budget Tracker - Multi-Theme System
 * Defines 8 color themes using CSS custom properties
 */

/* Base variables (theme-independent) */
:root {
    /* Typography */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Spacing */
    --border-radius: 8px;
    --border-radius-sm: 4px;
    --border-radius-lg: 12px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.12);

    /* Transitions */
    --transition-base: 0.2s ease;
}

/* ===== LIGHT BLUE THEME (Default) ===== */
[data-theme="light-blue"] {
    /* Background colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;

    /* Text colors */
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-tertiary: #94a3b8;

    /* Accent colors */
    --accent-primary: #3b82f6;
    --accent-primary-hover: #2563eb;
    --accent-primary-light: #dbeafe;

    /* Status colors */
    --color-success: #10b981;
    --color-success-light: #d1fae5;
    --color-warning: #f59e0b;
    --color-warning-light: #fef3c7;
    --color-danger: #ef4444;
    --color-danger-light: #fee2e2;
    --color-info: #06b6d4;
    --color-info-light: #cffafe;

    /* Border colors */
    --border-color: #e2e8f0;
    --border-color-hover: #cbd5e1;

    /* Card/Surface colors */
    --card-bg: #ffffff;
    --card-border: #e2e8f0;

    /* Navbar */
    --navbar-bg: #3b82f6;
    --navbar-text: #ffffff;

    /* Muted/Secondary elements */
    --muted-bg: #f8fafc;
    --muted-text: #64748b;
}

/* ===== LIGHT GREEN THEME ===== */
[data-theme="light-green"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f7fef9;
    --bg-tertiary: #ecfdf5;

    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-tertiary: #94a3b8;

    --accent-primary: #10b981;
    --accent-primary-hover: #059669;
    --accent-primary-light: #d1fae5;

    --color-success: #10b981;
    --color-success-light: #d1fae5;
    --color-warning: #f59e0b;
    --color-warning-light: #fef3c7;
    --color-danger: #ef4444;
    --color-danger-light: #fee2e2;
    --color-info: #14b8a6;
    --color-info-light: #ccfbf1;

    --border-color: #e2e8f0;
    --border-color-hover: #cbd5e1;

    --card-bg: #ffffff;
    --card-border: #e2e8f0;

    --navbar-bg: #10b981;
    --navbar-text: #ffffff;

    --muted-bg: #f7fef9;
    --muted-text: #64748b;
}

/* ===== LIGHT PURPLE THEME ===== */
[data-theme="light-purple"] {
    --bg-primary: #ffffff;
    --bg-secondary: #faf5ff;
    --bg-tertiary: #f3e8ff;

    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-tertiary: #94a3b8;

    --accent-primary: #a855f7;
    --accent-primary-hover: #9333ea;
    --accent-primary-light: #e9d5ff;

    --color-success: #10b981;
    --color-success-light: #d1fae5;
    --color-warning: #f59e0b;
    --color-warning-light: #fef3c7;
    --color-danger: #ef4444;
    --color-danger-light: #fee2e2;
    --color-info: #8b5cf6;
    --color-info-light: #ddd6fe;

    --border-color: #e2e8f0;
    --border-color-hover: #cbd5e1;

    --card-bg: #ffffff;
    --card-border: #e2e8f0;

    --navbar-bg: #a855f7;
    --navbar-text: #ffffff;

    --muted-bg: #faf5ff;
    --muted-text: #64748b;
}

/* ===== LIGHT TEAL THEME ===== */
[data-theme="light-teal"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f0fdfa;
    --bg-tertiary: #ccfbf1;

    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-tertiary: #94a3b8;

    --accent-primary: #14b8a6;
    --accent-primary-hover: #0d9488;
    --accent-primary-light: #ccfbf1;

    --color-success: #10b981;
    --color-success-light: #d1fae5;
    --color-warning: #f59e0b;
    --color-warning-light: #fef3c7;
    --color-danger: #ef4444;
    --color-danger-light: #fee2e2;
    --color-info: #06b6d4;
    --color-info-light: #cffafe;

    --border-color: #e2e8f0;
    --border-color-hover: #cbd5e1;

    --card-bg: #ffffff;
    --card-border: #e2e8f0;

    --navbar-bg: #14b8a6;
    --navbar-text: #ffffff;

    --muted-bg: #f0fdfa;
    --muted-text: #64748b;
}

/* ===== DARK BLUE THEME ===== */
[data-theme="dark-blue"] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;

    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;

    --accent-primary: #60a5fa;
    --accent-primary-hover: #3b82f6;
    --accent-primary-light: #1e3a8a;

    --color-success: #34d399;
    --color-success-light: #064e3b;
    --color-warning: #fbbf24;
    --color-warning-light: #78350f;
    --color-danger: #f87171;
    --color-danger-light: #7f1d1d;
    --color-info: #22d3ee;
    --color-info-light: #164e63;

    --border-color: #334155;
    --border-color-hover: #475569;

    --card-bg: #1e293b;
    --card-border: #334155;

    --navbar-bg: #1e3a8a;
    --navbar-text: #f1f5f9;

    --muted-bg: #1e293b;
    --muted-text: #cbd5e1;

    /* Dark theme specific shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.5);
}

/* ===== DARK GREEN THEME ===== */
[data-theme="dark-green"] {
    --bg-primary: #0f1f15;
    --bg-secondary: #1a2e23;
    --bg-tertiary: #2d3d34;

    --text-primary: #f0fdf4;
    --text-secondary: #bbf7d0;
    --text-tertiary: #86efac;

    --accent-primary: #34d399;
    --accent-primary-hover: #10b981;
    --accent-primary-light: #064e3b;

    --color-success: #34d399;
    --color-success-light: #064e3b;
    --color-warning: #fbbf24;
    --color-warning-light: #78350f;
    --color-danger: #f87171;
    --color-danger-light: #7f1d1d;
    --color-info: #2dd4bf;
    --color-info-light: #134e4a;

    --border-color: #2d3d34;
    --border-color-hover: #3f5347;

    --card-bg: #1a2e23;
    --card-border: #2d3d34;

    --navbar-bg: #065f46;
    --navbar-text: #f0fdf4;

    --muted-bg: #1a2e23;
    --muted-text: #bbf7d0;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.5);
}

/* ===== DARK PURPLE THEME ===== */
[data-theme="dark-purple"] {
    --bg-primary: #1a0f2e;
    --bg-secondary: #2e1a47;
    --bg-tertiary: #3d2555;

    --text-primary: #faf5ff;
    --text-secondary: #e9d5ff;
    --text-tertiary: #c4b5fd;

    --accent-primary: #c084fc;
    --accent-primary-hover: #a855f7;
    --accent-primary-light: #581c87;

    --color-success: #34d399;
    --color-success-light: #064e3b;
    --color-warning: #fbbf24;
    --color-warning-light: #78350f;
    --color-danger: #f87171;
    --color-danger-light: #7f1d1d;
    --color-info: #a78bfa;
    --color-info-light: #4c1d95;

    --border-color: #3d2555;
    --border-color-hover: #4c2965;

    --card-bg: #2e1a47;
    --card-border: #3d2555;

    --navbar-bg: #6b21a8;
    --navbar-text: #faf5ff;

    --muted-bg: #2e1a47;
    --muted-text: #e9d5ff;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.5);
}

/* ===== DARK TEAL THEME ===== */
[data-theme="dark-teal"] {
    --bg-primary: #0a1f1f;
    --bg-secondary: #1a3030;
    --bg-tertiary: #2d4040;

    --text-primary: #f0fdfa;
    --text-secondary: #ccfbf1;
    --text-tertiary: #99f6e4;

    --accent-primary: #2dd4bf;
    --accent-primary-hover: #14b8a6;
    --accent-primary-light: #134e4a;

    --color-success: #34d399;
    --color-success-light: #064e3b;
    --color-warning: #fbbf24;
    --color-warning-light: #78350f;
    --color-danger: #f87171;
    --color-danger-light: #7f1d1d;
    --color-info: #22d3ee;
    --color-info-light: #164e63;

    --border-color: #2d4040;
    --border-color-hover: #3f5555;

    --card-bg: #1a3030;
    --card-border: #2d4040;

    --navbar-bg: #0f766e;
    --navbar-text: #f0fdfa;

    --muted-bg: #1a3030;
    --muted-text: #ccfbf1;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.5);
}

/* Apply theme variables to elements */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-family-base);
}