/**
 * Blue Theme Color Variables
 * Used for unified management of website theme colors
 * Usage: Import this file in HTML, then use var(--color-name) in CSS
 */

:root {
    /* ===== Primary Blue Colors (Brand Colors) ===== */
    /* Primary Blue - Most commonly used theme color */
    --color-primary: #0066cc;
    --color-primary-dark: #0052a3;
    --color-primary-darker: #003d7a;
    
    /* Primary Blue Semi-transparent Variants - For backgrounds, borders, shadows, etc. */
    --color-primary-rgba-01: rgba(0, 102, 204, 0.01);
    --color-primary-rgba-02: rgba(0, 102, 204, 0.02);
    --color-primary-rgba-03: rgba(0, 102, 204, 0.03);
    --color-primary-rgba-05: rgba(0, 102, 204, 0.05);
    --color-primary-rgba-06: rgba(0, 102, 204, 0.06);
    --color-primary-rgba-08: rgba(0, 102, 204, 0.08);
    --color-primary-rgba-10: rgba(0, 102, 204, 0.1);
    --color-primary-rgba-12: rgba(0, 102, 204, 0.12);
    --color-primary-rgba-15: rgba(0, 102, 204, 0.15);
    --color-primary-rgba-18: rgba(0, 102, 204, 0.18);
    --color-primary-rgba-20: rgba(0, 102, 204, 0.2);
    --color-primary-rgba-25: rgba(0, 102, 204, 0.25);
    --color-primary-rgba-30: rgba(0, 102, 204, 0.3);
    --color-primary-rgba-40: rgba(0, 102, 204, 0.4);
    --color-primary-rgba-60: rgba(0, 102, 204, 0.6);
    --color-primary-rgba-70: rgba(0, 102, 204, 0.7);
    --color-primary-rgba-80: rgba(0, 102, 204, 0.8);
    --color-primary-rgba-90: rgba(0, 102, 204, 0.9);
    
    /* Dark Blue Semi-transparent Variants */
    --color-primary-dark-rgba-10: rgba(0, 82, 163, 0.1);
    --color-primary-dark-rgba-15: rgba(0, 82, 163, 0.15);
    --color-primary-dark-rgba-30: rgba(0, 82, 163, 0.3);
    --color-primary-dark-rgba-80: rgba(0, 82, 163, 0.8);
    
    /* ===== Background Colors ===== */
    --color-bg-primary: #fff;                    /* Primary background color - White */
    --color-bg-light-green: #F0F7FF;            /* Light blue background - Content area (named for compatibility) */
    --color-bg-light-blue: #F0F7FF;             /* Light blue background - Content area */
    --color-bg-light-beige: #F5F7FA;            /* Light blue-gray background - Notice area */
    --color-bg-light-gray: #f8f9fa;            /* Light gray background - Cards, submenus */
    --color-bg-gray: #f8f8f8;                  /* Gray background */
    
    /* ===== Text Colors ===== */
    --color-text-primary: #333;                 /* Primary text color - Dark gray */
    --color-text-secondary: #666;              /* Secondary text color - Medium gray */
    --color-text-tertiary: #444;                /* Tertiary text color - Dark gray */
    --color-text-title: #2c3e50;                /* Title text color - Dark blue-gray */
    --color-text-dark: #1a1a1a;                 /* Dark text - Near black */
    --color-text-muted: #6c757d;                /* Muted text color - Gray */
    --color-text-light: #ccc;                   /* Light text */
    --color-text-white: #fff;                   /* White text */
    --color-text-black: #000;                   /* Black text */
    
    /* ===== Border and Divider Colors ===== */
    --color-border-light: #e9ecef;             /* Light gray border */
    --color-border-gray: #e0e0e0;              /* Gray border */
    --color-border-lighter: #f0f0f0;           /* Lighter gray border */
    --color-border-medium: #ddd;                /* Medium gray border */
    --color-border-dark: #979595;              /* Dark gray border - Search box */
    --color-border-white: #fff;                 /* White border */
    --color-border-f3: #f3f3f3;                /* Light gray border */
    
    /* ===== Special Purpose Colors ===== */
    --color-accent-red: #f00;                   /* Accent red - Carousel indicator active state */
    --color-logo-text: #0066cc;                 /* Logo text color - Same as primary color */
    --color-overlay: rgba(0, 0, 0, 0.3);        /* Overlay color */
    --color-overlay-dark: rgba(0, 0, 0, 0.5);   /* Dark overlay */
    --color-overlay-darker: rgba(0, 0, 0, 0.7); /* Darker overlay */
    --color-overlay-darkest: rgba(0, 0, 0, 0.8); /* Darkest overlay */
    
    /* White Semi-transparent Variants */
    --color-white-rgba-10: rgba(255, 255, 255, 0.1);
    --color-white-rgba-15: rgba(255, 255, 255, 0.15);
    --color-white-rgba-20: rgba(255, 255, 255, 0.2);
    --color-white-rgba-50: rgba(255, 255, 255, 0.5);
    --color-white-rgba-70: rgba(255, 255, 255, 0.7);
    
    /* Black Semi-transparent Variants - For shadows */
    --color-black-rgba-05: rgba(0, 0, 0, 0.05);
    --color-black-rgba-08: rgba(0, 0, 0, 0.08);
    --color-black-rgba-10: rgba(0, 0, 0, 0.1);
    --color-black-rgba-15: rgba(0, 0, 0, 0.15);
    --color-black-rgba-20: rgba(0, 0, 0, 0.2);
    --color-black-rgba-30: rgba(0, 0, 0, 0.3);
    --color-black-rgba-35: rgba(0, 0, 0, 0.35);
    --color-black-rgba-40: rgba(0, 0, 0, 0.4);
    --color-black-rgba-50: rgba(0, 0, 0, 0.5);
    
    /* ===== Gradient Colors ===== */
    /* Primary Blue Gradients */
    --gradient-primary: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-rgba-60) 100%);
    --gradient-primary-135: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-rgba-80) 100%);
    --gradient-primary-180: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-rgba-80) 100%);
    --gradient-primary-dark: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary-darker) 100%);
    
    /* Background Gradients */
    --gradient-bg-light: linear-gradient(135deg, var(--color-bg-light-gray) 0%, var(--color-bg-primary) 100%);
    --gradient-bg-primary: linear-gradient(90deg, var(--color-primary-rgba-05) 0%, var(--color-primary-rgba-02) 100%);
    --gradient-bg-header: linear-gradient(135deg, var(--color-primary-rgba-06) 0%, var(--color-primary-rgba-03) 50%, var(--color-primary-rgba-01) 100%);
    
    /* Overlay Gradients */
    --gradient-overlay: linear-gradient(transparent, var(--color-overlay-darker));
    --gradient-border: linear-gradient(90deg, transparent 0%, var(--color-primary-rgba-10) 50%, transparent 100%);
}