/* ============================================
   THEME VARIABLES
   Default: Dark Mode
   ============================================ */

:root {
    /* Backgrounds */
    --bg-body: #0f0f1a;
    --bg-card: rgba(255, 255, 255, 0.03);
    --bg-card-hover: rgba(255, 255, 255, 0.05);
    --bg-nav: rgba(15, 15, 26, 0.95);
    --bg-nav-mobile: rgba(26, 26, 46, 0.95);
    --bg-input: rgba(255, 255, 255, 0.05);
    --bg-modal: #1a1a2e;
    --bg-badge: rgba(76, 175, 80, 0.15);
    --bg-tag: rgba(255, 107, 107, 0.1);

    /* Text */
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --text-muted: #888888;
    --text-header: #ffffff;
    --text-nav: #e0e0e0;
    --text-inverse: #000000;

    /* Borders */
    --border-light: rgba(255, 255, 255, 0.1);
    --border-card: rgba(255, 255, 255, 0.08);
    --border-accent: rgba(255, 107, 107, 0.3);

    /* Accents */
    --accent: #ff6b6b;
    --accent-hover: #ff8e53;
    --accent-red: #ff4444;
    --accent-green: #4caf50;

    /* Shadows */
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.2);
    --shadow-card-hover: 0 20px 40px rgba(0, 0, 0, 0.3);

    /* Gradients */
    --grad-primary: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
    --grad-card: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
}

/* ============================================
   LIGHT MODE OVERRIDES
   ============================================ */
[data-theme="light"] {
    /* Backgrounds */
    --bg-body: #f4f6f8;
    --bg-card: #ffffff;
    --bg-card-hover: #ffffff;
    --bg-nav: rgba(255, 255, 255, 0.95);
    --bg-nav-mobile: rgba(255, 255, 255, 0.95);
    --bg-input: #ffffff;
    --bg-modal: #ffffff;
    --bg-badge: #e8f5e9;
    --bg-tag: #fff5f5;

    /* Text */
    --text-primary: #333333;
    --text-secondary: #555555;
    --text-muted: #666666;
    --text-header: #1a1a2e;
    --text-nav: #444444;
    --text-inverse: #ffffff;

    /* Borders */
    --border-light: rgba(0, 0, 0, 0.1);
    --border-card: rgba(0, 0, 0, 0.05);
    --border-accent: rgba(255, 107, 107, 0.5);

    /* Accents */
    --accent: #ff6b6b;
    /* Sustain branding */
    --accent-hover: #ff8e53;
    --accent-red: #d32f2f;
    --accent-green: #2e7d32;

    /* Shadows */
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.05);
    --shadow-card-hover: 0 10px 30px rgba(0, 0, 0, 0.1);

    /* Gradients */
    --grad-primary: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
    --grad-card: linear-gradient(135deg, #ffffff, #f9f9f9);
}