/* ===== THEME COLORS - BLUE CYAN ===== */
/* CSS Variables for Theme Management - Blue Cyan Theme */
/* This file contains all color variables for the blue cyan theme */

:root {
    /* ===== PRIMARY THEME COLORS ===== */
    --primary-color: #00d4ff;              /* Main brand color - cyan blue */
    --primary-dark: #0099cc;               /* Darker shade of primary */
    --primary-darker: #007399;             /* Even darker shade */
    --secondary-color: #1a1a2e;            /* Secondary dark blue */
    --accent-color: #16213e;               /* Accent dark blue */

    /* ===== BACKGROUND COLORS ===== */
    --bg-primary: #0f0f23;                 /* Main dark background */
    --bg-secondary: #1a1a2e;               /* Secondary background */
    --bg-accent: #16213e;                  /* Accent background */
    --bg-overlay: rgba(15, 15, 35, 0.95);  /* Navbar/overlay background */
    --bg-overlay-dark: rgba(0, 0, 0, 0.8); /* Dark overlay */
    --bg-overlay-light: rgba(255, 255, 255, 0.05); /* Light overlay */

    /* ===== TEXT COLORS ===== */
    --text-primary: #ffffff;               /* Primary white text */
    --text-secondary: rgba(255, 255, 255, 0.8); /* Secondary white text */
    --text-muted: rgba(255, 255, 255, 0.6); /* Muted white text */
    --text-disabled: rgba(255, 255, 255, 0.5); /* Disabled text */
    --text-accent: #00d4ff;                /* Accent text color */

    /* ===== BORDER COLORS ===== */
    --border-primary: rgba(255, 255, 255, 0.1); /* Primary border */
    --border-secondary: rgba(255, 255, 255, 0.2); /* Secondary border */
    --border-accent: rgba(0, 212, 255, 0.2); /* Accent border */
    --border-accent-strong: rgba(0, 212, 255, 0.3); /* Strong accent border */
    --border-accent-stronger: rgba(0, 212, 255, 0.5); /* Stronger accent border */

    /* ===== INTERACTIVE STATES ===== */
    --hover-bg: rgba(0, 212, 255, 0.1);    /* Hover background */
    --hover-bg-strong: rgba(0, 212, 255, 0.2); /* Strong hover background */
    --active-bg: rgba(0, 212, 255, 0.15);  /* Active background */
    --focus-shadow: rgba(0, 212, 255, 0.2); /* Focus shadow */

    /* ===== GRADIENTS ===== */
    --gradient-primary: linear-gradient(45deg, #00d4ff, #0099cc); /* Primary gradient */
    --gradient-primary-hover: linear-gradient(45deg, #0099cc, #007399); /* Primary hover gradient */
    --gradient-bg: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%); /* Background gradient */
    --gradient-overlay: linear-gradient(135deg, rgba(15, 15, 35, 0.98), rgba(25, 25, 45, 0.98)); /* Overlay gradient */
    --gradient-brand: linear-gradient(45deg, #00d4ff, #0099cc); /* Brand gradient */

    /* ===== SPECIAL COLORS ===== */
    --error-color: #ff4757;                /* Error/notification color */
    --error-hover: rgba(255, 0, 0, 0.2);   /* Error hover background */
    --warning-color: #ffd700;              /* Warning/star color */
    --success-color: #00d4ff;              /* Success color (same as primary) */

    /* ===== SHADOW COLORS ===== */
    --shadow-light: rgba(0, 0, 0, 0.3);    /* Light shadow */
    --shadow-medium: rgba(0, 0, 0, 0.4);   /* Medium shadow */
    --shadow-accent: rgba(0, 212, 255, 0.2); /* Accent shadow */
    --shadow-accent-strong: rgba(0, 212, 255, 0.3); /* Strong accent shadow */

    /* ===== ADDITIONAL THEME COLORS ===== */
    --accent-secondary: rgba(0, 150, 200, 0.1); /* Secondary accent color */
    --accent-secondary-medium: rgba(0, 150, 200, 0.15); /* Medium secondary accent */
    --accent-secondary-strong: rgba(0, 150, 200, 0.25); /* Strong secondary accent */
    --error-hover-bg: rgba(255, 0, 0, 0.2); /* Error hover background */
    --error-close-hover: #ff4444;          /* Error close button hover */
    --placeholder-bg: #333333;             /* Placeholder background color */
    --overlay-dark-strong: rgba(0, 0, 0, 0.85); /* Strong dark overlay */
    --overlay-medium: rgba(0, 0, 0, 0.3);  /* Medium overlay */
    --white-text: #ffffff;                 /* Pure white text */
}