/**
 * Theme System - CSS Variables
 * Multiple color themes for ORBIT dashboard
 */

/* ===================================
   DEFAULT THEME (Dark - Current)
   =================================== */

:root,
[data-theme="dark"] {
    /* Background Colors */
    --bg-primary: #0a0e27;
    --bg-secondary: #151b3d;
    --bg-tertiary: #1a2142;
    --bg-glass: rgba(10, 14, 39, 0.85);

    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-tertiary: rgba(255, 255, 255, 0.5);

    /* Accent Colors */
    --accent: #00f3ff;
    --accent-secondary: #0066ff;
    --accent-glow: rgba(0, 243, 255, 0.4);

    /* Status Colors */
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    --info: #3b82f6;

    /* Border & Shadow */
    --border-color: rgba(255, 255, 255, 0.1);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);

    /* Gradient */
    --gradient-primary: linear-gradient(135deg, #00f3ff 0%, #0066ff 100%);
    --gradient-accent: linear-gradient(135deg, #00f3ff 0%, #d946ef 100%);
}

/* ===================================
   LIGHT THEME
   =================================== */

[data-theme="light"] {
    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --bg-glass: rgba(255, 255, 255, 0.85);

    /* Text Colors */
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-tertiary: #94a3b8;

    /* Accent Colors */
    --accent: #0066ff;
    --accent-secondary: #00f3ff;
    --accent-glow: rgba(0, 102, 255, 0.2);

    /* Status Colors */
    --success: #059669;
    --warning: #d97706;
    --error: #dc2626;
    --info: #2563eb;

    /* Border & Shadow */
    --border-color: rgba(0, 0, 0, 0.1);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);

    /* Gradient */
    --gradient-primary: linear-gradient(135deg, #0066ff 0%, #00f3ff 100%);
    --gradient-accent: linear-gradient(135deg, #0066ff 0%, #d946ef 100%);
}

/* ===================================
   CYAN THEME (Ocean)
   =================================== */

[data-theme="cyan"] {
    --bg-primary: #051419;
    --bg-secondary: #0a1f28;
    --bg-tertiary: #0f2a37;

    --accent: #06b6d4;
    --accent-secondary: #0891b2;
    --accent-glow: rgba(6, 182, 212, 0.4);

    --gradient-primary: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    --gradient-accent: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
}

/* ===================================
   PURPLE THEME (Galaxy)
   =================================== */

[data-theme="purple"] {
    --bg-primary: #1a0b2e;
    --bg-secondary: #2d1654;
    --bg-tertiary: #3d1f6b;

    --accent: #a855f7;
    --accent-secondary: #d946ef;
    --accent-glow: rgba(168, 85, 247, 0.4);

    --gradient-primary: linear-gradient(135deg, #a855f7 0%, #d946ef 100%);
    --gradient-accent: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
}

/* ===================================
   GREEN THEME (Forest)
   =================================== */

[data-theme="green"] {
    --bg-primary: #0d1f16;
    --bg-secondary: #14291f;
    --bg-tertiary: #1a3628;

    --accent: #10b981;
    --accent-secondary: #059669;
    --accent-glow: rgba(16, 185, 129, 0.4);

    --gradient-primary: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --gradient-accent: linear-gradient(135deg, #10b981 0%, #0891b2 100%);
}

/* ===================================
   ORANGE THEME (Sunset)
   =================================== */

[data-theme="orange"] {
    --bg-primary: #1f1108;
    --bg-secondary: #2d1a0e;
    --bg-tertiary: #3d2214;

    --accent: #f59e0b;
    --accent-secondary: #d97706;
    --accent-glow: rgba(245, 158, 11, 0.4);

    --gradient-primary: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --gradient-accent: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
}

/* ===================================
   ROSE THEME (Romantic)
   =================================== */

[data-theme="rose"] {
    --bg-primary: #1f0a14;
    --bg-secondary: #2d1520;
    --bg-tertiary: #3d1f2c;

    --accent: #f43f5e;
    --accent-secondary: #e11d48;
    --accent-glow: rgba(244, 63, 94, 0.4);

    --gradient-primary: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
    --gradient-accent: linear-gradient(135deg, #f43f5e 0%, #ec4899 100%);
}

/* ===================================
   HIGH CONTRAST THEME (Accessibility)
   =================================== */

[data-theme="high-contrast"] {
    --bg-primary: #000000;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #2d2d2d;
    --bg-glass: rgba(0, 0, 0, 0.95);

    --text-primary: #ffffff;
    --text-secondary: #e5e5e5;
    --text-tertiary: #cccccc;

    --accent: #00ff00;
    --accent-secondary: #ffff00;
    --accent-glow: rgba(0, 255, 0, 0.6);

    --success: #00ff00;
    --warning: #ffff00;
    --error: #ff0000;
    --info: #00ffff;

    --border-color: rgba(255, 255, 255, 0.3);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.8);
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.9);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 1);

    --gradient-primary: linear-gradient(135deg, #00ff00 0%, #00ffff 100%);
    --gradient-accent: linear-gradient(135deg, #ffff00 0%, #ff00ff 100%);
}

[data-theme="high-contrast"] * {
    border-width: 2px !important;
}

/* ===================================
   THEME TRANSITION
   =================================== */

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.card,
.modal,
.sidebar,
.header {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* ===================================
   USAGE EXAMPLES
   =================================== */

/*
To change theme, add data-theme attribute to <body>:

<body data-theme="light">
<body data-theme="cyan">
<body data-theme="purple">

JavaScript:
document.body.setAttribute('data-theme', 'light');
localStorage.setItem('orbit_theme', 'light');
*/