/* ============================================
   COLOR PALETTE & VARIABLES
   Theme: Dark Crimson Red
   ============================================ */

:root {
    /* Primary Brand Colors - Crimson Red Theme */
    --color-primary: #DC143C;           /* Crimson Red - main brand color */
    --color-primary-dark: #8B0000;      /* Dark Red - accents & gradients */
    --color-primary-glow: rgba(220, 20, 60, 0.3); /* Red glow for shadows */
    
    /* Secondary/Accent Colors - Blue Theme */
    --color-accent-blue: #2563EB;       /* Bright Blue - hover states */
    --color-accent-blue-dark: #1D4ED8;  /* Dark Blue - active states */
    --color-accent-blue-alpha: rgba(37, 99, 235, 0.3); /* Blue with transparency */
    
    /* Neutral Colors - Dark Theme */
    --color-black: #000000;             /* Pure Black */
    --color-near-black: #1a1a1a;        /* Very Dark Gray - backgrounds */
    --color-dark-gray: #2a2a2a;         /* Dark Gray - cards */
    --color-medium-gray: #7f8c8d;       /* Medium Gray - subtitles */
    --color-light-gray: #cccccc;        /* Light Gray - descriptions */
    --color-off-white: #f5f5f5;         /* Off-White - main text */
    --color-white: #ffffff;             /* Pure White */
    
    /* Accessibility Colors */
    --color-focus: #d8ab52;             /* Gold - focus indicators */
    --color-focus-outline: #030200;     /* Near Black - outlines */
    --color-focus-bg: rgba(216, 171, 82, 0.1); /* Gold background for focus */
    
    /* Text Colors */
    --text-primary: #f5f5f5;            /* Main text - off white */
    --text-secondary: #cccccc;          /* Secondary text - light gray */
    --text-muted: #7f8c8d;              /* Muted text - medium gray */
    --text-white: #ffffff;              /* Pure white text */
    --text-dark: #000000;               /* Black text (for light backgrounds) */
    
    /* Background Colors */
    --bg-primary: #1a1a1a;              /* Main dark background */
    --bg-secondary: #2a2a2a;            /* Secondary dark background */
    --bg-pure-black: #000000;           /* Pure black */
    --bg-navbar: rgba(26, 26, 26, 0.95); /* Navbar with slight transparency */
    --bg-sections: rgba(42, 42, 42, 0.95); /* Sections with slight transparency */
    --bg-footer: #1a1a1a;               /* Footer background */
    
    /* Gradients */
    --gradient-primary: linear-gradient(45deg, #DC143C, #8B0000);
    --gradient-primary-reverse: linear-gradient(135deg, #DC143C 0%, #8B0000 100%);
    --gradient-blue: linear-gradient(45deg, #2563EB, #1D4ED8);
    --gradient-bg-main: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
    --gradient-overlay-dark: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4));
    --gradient-gallery-subtle: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.1));
    --gradient-white-overlay: rgba(255, 255, 255, 0.3);
    
    /* Border Colors */
    --border-primary: #DC143C;
    --border-blue: #2563EB;
    --border-blue-dark: #1D4ED8;
    --border-transparent: transparent;
    --border-white: #ffffff;
    
    /* Shadow Colors */
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-medium: rgba(0, 0, 0, 0.15);
    --shadow-dark: rgba(0, 0, 0, 0.3);
    --shadow-darker: rgba(0, 0, 0, 0.4);
    --shadow-darkest: rgba(0, 0, 0, 0.5);
    --shadow-navbar: rgba(220, 20, 60, 0.3);
    --shadow-focus: rgba(0, 0, 0, 0.5);
    
    /* Overlay Colors */
    --overlay-dark: rgba(0, 0, 0, 0.35);
    --overlay-darker: rgba(0, 0, 0, 0.4);
    --overlay-darkest: rgba(0, 0, 0, 0.9);
    --overlay-white-light: rgba(255, 255, 255, 0.3);
    --overlay-white-spinner: rgba(255, 255, 255, 0.3);
    
    /* Accessibility - Focus Outline */
    --focus-width: 3px;
    --focus-offset: 2px;
    --focus-offset-large: 3px;
    
    /* High Contrast Mode Overrides */
    --hc-bg: #000;
    --hc-text: #fff;
    --hc-border: #fff;
    
    /* Component-Specific Colors */
    --hamburger-default: #ffffff;
    --hamburger-hover: #2563EB;
    
    /* Animation Colors */
    --spinner-border: rgba(37, 99, 235, 0.3);
    --spinner-top: #2563EB;
    --spinner-white-border: rgba(255, 255, 255, 0.3);
    --spinner-white-top: #ffffff;
}

/* ============================================
   ALTERNATIVE THEMES (Optional)
   Uncomment to enable different color schemes
   ============================================ */

/* Light Theme - Uncomment to enable
[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --text-primary: #1a1a1a;
    --text-secondary: #2a2a2a;
    --color-primary: #DC143C;
}
*/

/* Gold Theme (Original) - Uncomment to switch back
[data-theme="gold"] {
    --color-primary: #d8ab52;
    --color-primary-dark: #e0b962;
    --color-accent-blue: #B0B1B1;
    --bg-primary: #FFFFFF;
    --text-primary: #d8ab52;
}
*/

/* Blue Theme - Uncomment to enable
[data-theme="blue"] {
    --color-primary: #3b82f6;
    --color-primary-dark: #2563eb;
    --color-accent-blue: #60a5fa;
}
*/

/* ============================================
   UTILITY CLASSES
   Use these classes to apply colors directly
   ============================================ */

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-white { color: var(--text-white); }

.bg-primary { background: var(--bg-primary); }
.bg-secondary { background: var(--bg-secondary); }
.bg-dark { background: var(--bg-pure-black); }

.border-primary { border-color: var(--border-primary); }
.border-blue { border-color: var(--border-blue); }

/* ============================================
   END COLOR PALETTE
   ============================================ */