/* ============================================
   COLOR PALETTE & VARIABLES
   Theme: Elegant Gold
   Sophisticated light theme with elegant gold accents - Doreen Sasson Opera Singer
   Auto-generated from design/colors.json
   ============================================ */

:root {
    /* Primary Brand Colors */
    --color-primary: #d8ab52;
    --color-primary-dark: #f1cf89;
    --color-primary-glow: rgba(216, 171, 82, 0.3);

    /* Secondary/Accent Colors */
    --color-accent-blue: #B0B1B1;
    --color-accent-blue-dark: #B0B1B1;
    --color-accent-blue-alpha: rgba(176, 177, 177, 0.15);

    /* Neutral Colors */
    --color-black: #030200;
    --color-near-black: #030200;
    --color-dark-gray: #B0B1B1;
    --color-medium-gray: #B0B1B1;
    --color-light-gray: #F7F9FB;
    --color-off-white: #FEFEFE;
    --color-white: #FFFFFF;

    /* Accessibility Colors */
    --color-focus: #d8ab52;
    --color-focus-outline: #B0B1B1;
    --color-focus-bg: rgba(216, 171, 82, 0.1);

    /* Text Colors */
    --text-primary: #d8ab52;
    --text-secondary: #030200;
    --text-muted: #B0B1B1;
    --text-white: #ffffff;
    --text-dark: #030200;

    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F7F9FB;
    --bg-pure-black: #000000;
    --bg-navbar: rgba(252, 253, 253, 0.98);
    --bg-sections: #FEFEFE;
    --bg-footer: #0c194c;

    /* Border Colors */
    --border-primary: #B0B1B1;
    --border-blue: #d8ab52;
    --border-blue-dark: #030200;
    --border-transparent: transparent;
    --border-white: #ffffff;

    /* Shadow Colors */
    --shadow-light: rgba(176, 177, 177, 0.15);
    --shadow-medium: rgba(176, 177, 177, 0.25);
    --shadow-dark: rgba(176, 177, 177, 0.3);
    --shadow-darker: rgba(0, 0, 0, 0.3);
    --shadow-darkest: rgba(0, 0, 0, 0.5);
    --shadow-navbar: rgba(176, 177, 177, 0.15);
    --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);

    /* Gradients */
    --gradient-primary: linear-gradient(45deg, #d8ab52, #f1cf89);
    --gradient-primary-reverse: linear-gradient(135deg, #d8ab52 0%, #f1cf89 100%);
    --gradient-blue: linear-gradient(45deg, #B0B1B1, #F5F8F9);
    --gradient-bg-main: linear-gradient(135deg, #FCFDFD 0%, #F7F9FB 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);

    /* Accessibility - Focus Outline */
    --focus-width: 3px;
    --focus-offset: 2px;
    --focus-offset-large: 3px;

    /* High Contrast Mode Overrides */
    --hc-bg: #fff;
    --hc-text: #000;
    --hc-border: #000;

    /* Component-Specific Colors */
    --hamburger-default: #d8ab52;
    --hamburger-hover: #B0B1B1;
    --spinner-border: rgba(176, 177, 177, 0.2);
    --spinner-top: #030200;
    --spinner-white-border: rgba(255, 255, 255, 0.3);
    --spinner-white-top: #ffffff;

}

/* ============================================
   ALTERNATIVE THEMES
   ============================================ */

/*
[data-theme="light"] {
    --background-primary: #ffffff;
    --background-secondary: #f5f5f5;
    --text-primary: #d8ab52;
    --text-secondary: #030200;
    --colors-primary-main: #d8ab52;
}
*/

/*
[data-theme="dark"] {
    --colors-primary-main: #d8ab52;
    --colors-primary-dark: #e0b962;
    --accent-blue: #B0B1B1;
    --background-primary: #1a1a1a;
    --text-primary: #f5f5f5;
}
*/

/*
[data-theme="blue"] {
    --colors-primary-main: #3b82f6;
    --colors-primary-dark: #2563eb;
    --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
   ============================================ */