/* ==========================================================================
   Soul Realms Brand Color Palette
   Approved by Nath - Gold & Purple Theme
   WCAG 2.1 Level AA Compliant
   ========================================================================== */

:root {
  /* ========================================================================
     PRIMARY COLORS - Gold & Purple (Brand Core)
     ======================================================================== */
  
  --color-gold: #ffd700;
  --color-gold-rgb: 255, 215, 0;
  --color-gold-hsl: 51, 100%, 50%;
  
  --color-purple: #450086;
  --color-purple-rgb: 69, 0, 134;
  --color-purple-hsl: 270, 100%, 26%;

  /* ========================================================================
     SECONDARY COLORS - Gold & Purple Shades
     ======================================================================== */
  
  --color-gold-light: #ffdf33;
  --color-gold-light-rgb: 255, 223, 51;
  --color-gold-light-hsl: 53, 100%, 60%;
  
  --color-gold-dark: #ccac00;
  --color-gold-dark-rgb: 204, 172, 0;
  --color-gold-dark-hsl: 51, 100%, 40%;
  
  --color-purple-medium: #5f00b9;
  --color-purple-medium-rgb: 95, 0, 185;
  --color-purple-medium-hsl: 270, 100%, 36%;
  
  --color-purple-dark: #2b0053;
  --color-purple-dark-rgb: 43, 0, 83;
  --color-purple-dark-hsl: 270, 100%, 16%;

  /* ========================================================================
     SEMANTIC COLORS - UI States
     ======================================================================== */
  
  --color-success: #4CAF50;
  --color-success-rgb: 76, 175, 80;
  --color-error: #f44336;
  --color-error-rgb: 244, 67, 54;
  --color-warning: #ff9800;
  --color-warning-rgb: 255, 152, 0;
  --color-info: #2196F3;
  --color-info-rgb: 33, 150, 243;

  /* ========================================================================
     NEUTRAL COLORS - Grays
     ======================================================================== */
  
  --color-white: #ffffff;
  --color-white-rgb: 255, 255, 255;
  
  --color-gray-50: #fafafa;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #eeeeee;
  --color-gray-300: #e0e0e0;
  --color-gray-400: #bdbdbd;
  --color-gray-500: #9e9e9e;
  --color-gray-600: #757575;
  --color-gray-700: #616161;
  --color-gray-800: #424242;
  --color-gray-900: #212121;
  --color-black: #000000;
  --color-black-rgb: 0, 0, 0;

  /* ========================================================================
     BRAND GRADIENTS
     ======================================================================== */
  
  --gradient-gold: linear-gradient(135deg, #ffd700 0%, #ffdf33 50%, #ccac00 100%);
  --gradient-purple: linear-gradient(135deg, #450086 0%, #5f00b9 50%, #2b0053 100%);
  --gradient-mystic: linear-gradient(135deg, #ffd700 0%, #450086 50%, #2b0053 100%);
  --gradient-sunset: linear-gradient(135deg, #ffdf33 0%, #ff9800 50%, #e2725b 100%);

  /* ========================================================================
     DARK MODE COLORS (Auto-adjusted via @media prefers-color-scheme)
     ======================================================================== */
  
  --bg-primary-dark: #0a0014;
  --bg-secondary-dark: #140028;
  --bg-tertiary-dark: #1e0040;
  --text-primary-dark: #ffffff;
  --text-secondary-dark: #e0d0ff;

  /* ========================================================================
     LIGHT MODE COLORS (Default)
     ======================================================================== */
  
  --bg-primary-light: #ffffff;
  --bg-secondary-light: #faf5ff;
  --bg-tertiary-light: #f5f0ff;
  --text-primary-light: #2b0053;
  --text-secondary-light: #450086;

  /* ========================================================================
     BORDER & FOCUS COLORS
     ======================================================================== */
  
  --border-color: #e0e0e0;
  --border-color-focus: #ffd700;
  --focus-ring: 0 0 0 3px rgba(255, 215, 0, 0.4);

  /* ========================================================================
     SHADOW COLORS
     ======================================================================== */
  
  --shadow-gold: 0 4px 12px rgba(255, 215, 0, 0.3);
  --shadow-purple: 0 4px 12px rgba(69, 0, 134, 0.3);
}

/* ==========================================================================
   DARK MODE OVERRIDES
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: var(--bg-primary-dark);
    --bg-secondary: var(--bg-secondary-dark);
    --bg-tertiary: var(--bg-tertiary-dark);
    --text-primary: var(--text-primary-dark);
    --text-secondary: var(--text-secondary-dark);
    --border-color: #3a2a60;
  }
}

/* ==========================================================================
   LIGHT MODE OVERRIDES (Explicit)
   ========================================================================== */

[data-theme="light"] :root,
:root:not([data-theme="dark"]) {
  --bg-primary: var(--bg-primary-light);
  --bg-secondary: var(--bg-secondary-light);
  --bg-tertiary: var(--bg-tertiary-light);
  --text-primary: var(--text-primary-light);
  --text-secondary: var(--text-secondary-light);
  --border-color: #e0e0e0;
}

/* ==========================================================================
   DARK MODE OVERRIDES (Explicit)
   ========================================================================== */

[data-theme="dark"] :root {
  --bg-primary: var(--bg-primary-dark);
  --bg-secondary: var(--bg-secondary-dark);
  --bg-tertiary: var(--bg-tertiary-dark);
  --text-primary: var(--text-primary-dark);
  --text-secondary: var(--text-secondary-dark);
  --border-color: #3a2a60;
}

/* ==========================================================================
   CSS CUSTOM PROPERTIES EXPORT (for JS usage)
   ========================================================================== */

:root {
  --export-gold-hex: "#ffd700";
  --export-purple-hex: "#450086";
  --export-gold-light-hex: "#ffdf33";
  --export-gold-dark-hex: "#ccac00";
  --export-purple-medium-hex: "#5f00b9";
  --export-purple-dark-hex: "#2b0053";
}