/* Globe Capital Theme Customizer Styles */
/* Dark/Light Mode & Typography Controls */

/* ================================================================
   CENTRALIZED CSS VARIABLES - SINGLE SOURCE OF TRUTH
   ================================================================
   All theme variables defined here for dynamic use across themes.
   Use these variable names consistently throughout the codebase.
   ================================================================ */

/* Base CSS Custom Properties - Default Light Theme */
:root {
  /* Layout & Spacing */
  --letter-spacing: 0em;
  --word-spacing: 0em;
  --font-size: 16px;

  /* Font Families */
  --font-primary: 'Metrophobic', sans-serif;
  --font-secondary: 'Maison Neue', sans-serif;
  --font-dyslexia: 'Merriweather', Georgia, serif;

  /* Background Colors */
  --body-bg: #ffffff;
  --bg-color: #ffffff;
  --secondary-bg: #f8f9fa;
  --section-bg: #f8f9fa;
  --section-secondary-bg: #f8f9fa;
  
  /* Card Colors */
  --card-bg: #ffffff;
  --card-color: #262424;
  --card-reverse-bg: #ffffff;
  --card-reverse-color: #262424;
  --card-border: #ecf7fc;
  --card-secondary-bg: #ffffff;
  --card-secondary-color: #262424;
  --card-secondary-border: #ecf7fc;
  
  /* Text Colors */
  --text-color: #262424;
  --caption-color: #1e3a8a;
  
  /* Link Colors */
  --link-color: #1e7ae0;
  --link-hover-color: #1e40af;
  
  /* Border & Accent */
  --border-color: #bbd7f6;
  --accent-color: #1e3a8a;
  
  /* Button Colors */
  --button-bg: #1e3a8a;
  --button-text: #ffffff;
  --button-hover-bg: #1e40af;
  --button-hover-text: #ffffff;
  
  /* Input Colors */
  --input-bg: #ffffff;
  --input-text: #262424;
  --input-border: #e5e5e5;
  --input-focus-border: #1e3a8a;
  --input-placeholder: #999999;
  
  /* Header & Footer */
  --header-bg: #ffffff;
  --header-text: #262424;
  --footer-bg: #f8f9fa;
  --footer-text: #262424;
  
  /* Navigation */
  --nav-bg: #ffffff;
  --nav-text: #262424;
  --nav-hover-bg: #f8f9fa;
  --nav-hover-text: #262424;
  
  /* Table Colors */
  --table-header-bg: #f8f9fa;
  --table-header-text: #262424;
  --table-row-bg: #ffffff;
  --table-row-alt-bg: #f8f9fa;
  --table-row-text: #262424;
  --table-row-hover-bg: #f1f1f1;
  --table-row-hover-text: #262424;
  
  /* Code & Blockquote */
  --blockquote-bg: #f8f9fa;
  --blockquote-border: #e5e5e5;
  --blockquote-text: #262424;
  --code-bg: #f1f1f1;
  --code-text: #262424;
  --code-border: #e5e5e5;
  
  /* Status Colors - Universal (same in all themes) */
  --success-color: #28a745;
  --error-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #17a2b8;
  
  /* Status Backgrounds */
  --success-bg: #d4edda;
  --error-bg: #f8d7da;
  --warning-bg: #fff3cd;
  --info-bg: #d1ecf1;
  
  /* Brand Colors */
  --blue-color: #0A2349;
  --grey-color: #262424;
  --yellow-color: #fdf6c9;
  --light-blue-color: #bbd7f6;
  --light-white-color: #f9fafb;
  --sky-blue-color: #e9f7fd;
  
  /* Computed/Dynamic Values */
  --data-bg: var(--bg-color);
  --shadow-color: rgba(0, 0, 0, 0.1);
}

/* ================================================================
   AUTO MODE - System Preference Support (Dark)
   Only override variables that change in dark mode
   ================================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    /* Background Colors */
    --body-bg: #003049;
    --bg-color: #003049;
    --secondary-bg: #1a1a1a;
    --section-bg: #1a1a1a;
    --section-secondary-bg: #1a1a1a;
    
    /* Card Colors */
    --card-bg: #03045e;
    --card-color: #ffffff;
    --card-reverse-bg: #03045e;
    --card-reverse-color: #ffffff;
    --card-border: #444444;
    --card-secondary-bg: #03045e;
    --card-secondary-color: #ffffff;
    --card-secondary-border: #444444;
    
    /* Text Colors */
    --text-color: #ffffff;
    --caption-color: #60a5fa;
    
    /* Link Colors */
    --link-color: #00ffff;
    --link-hover-color: #06dede;
    
    /* Border & Accent */
    --border-color: #60a5fa;
    --accent-color: #60a5fa;
    
    /* Button Colors */
    --button-bg: #1e7ae0;
    --button-hover-bg: #3b82f6;
    
    /* Input Colors */
    --input-bg: #1a1a1a;
    --input-text: #ffffff;
    --input-border: #333333;
    --input-focus-border: #60a5fa;
    --input-placeholder: #cccccc;
    
    /* Header & Footer */
    --header-bg: #1a1a1a;
    --header-text: #ffffff;
    --footer-bg: #1a1a1a;
    --footer-text: #ffffff;
    
    /* Navigation */
    --nav-bg: #023e8a;
    --nav-text: #ffffff;
    --nav-hover-bg: #333333;
    --nav-hover-text: #00ffff;
    
    /* Table Colors */
    --table-header-bg: #333333;
    --table-header-text: #ffffff;
    --table-row-bg: #1a1a1a;
    --table-row-alt-bg: #333333;
    --table-row-text: #ffffff;
    --table-row-hover-bg: #444444;
    --table-row-hover-text: #ffffff;
    
    /* Code & Blockquote */
    --blockquote-bg: #1a1a1a;
    --blockquote-border: #333333;
    --blockquote-text: #ffffff;
    --code-bg: #333333;
    --code-text: #ffffff;
    --code-border: #444444;
    
    /* Status Backgrounds */
    --success-bg: #155724;
    --error-bg: #721c24;
    --warning-bg: #856404;
    --info-bg: #0c5460;
    
    /* Brand Colors - Dark adjustments */
    --grey-color: #cccccc;
    --light-white-color: #003153;
    --sky-blue-color: #00a6fb;
    
    /* Shadow */
    --shadow-color: rgba(255, 255, 255, 0.1);
  }
}

/* ================================================================
   LIGHT THEME MODE - Explicit Light Selection
   Uses :root defaults, included for explicitness
   ================================================================ */
.theme-mode-light {
  /* All variables inherit from :root defaults above */
  /* No need to redefine - included for code clarity */
  --body-bg: #ffffff;
  --bg-color: #ffffff;
  --text-color: #262424;
  --border-color: #bbd7f6;
  --accent-color: #1e3a8a;
  --secondary-bg: #f8f9fa;
  --section-bg: #f8f9fa;
  --section-secondary-bg: #f8f9fa;
  --card-bg: #ffffff;
  --card-color: #262424;
  --card-reverse-bg: #ffffff;
  --card-reverse-color: #262424;
  --card-border: #ecf7fc;
  --card-secondary-bg: #ffffff;
  --card-secondary-color: #262424;
  --card-secondary-border: #ecf7fc;
  --link-color: #1e7ae0;
  --link-hover-color: #1e40af;
  --caption-color: #1e3a8a;
  --button-bg: #1e3a8a;
  --button-text: #ffffff;
  --button-hover-bg: #1e40af;
  --button-hover-text: #ffffff;
  --input-bg: #ffffff;
  --input-text: #262424;
  --input-border: #e5e5e5;
  --input-focus-border: #1e3a8a;
  --input-placeholder: #999999;
  --header-bg: #ffffff;
  --header-text: #262424;
  --footer-bg: #f8f9fa;
  --footer-text: #262424;
  --nav-bg: #ffffff;
  --nav-text: #262424;
  --nav-hover-bg: #f8f9fa;
  --nav-hover-text: #262424;
  --table-header-bg: #f8f9fa;
  --table-header-text: #262424;
  --table-row-bg: #ffffff;
  --table-row-alt-bg: #f8f9fa;
  --table-row-text: #262424;
  --table-row-hover-bg: #f1f1f1;
  --table-row-hover-text: #262424;
  --blockquote-bg: #f8f9fa;
  --blockquote-border: #e5e5e5;
  --blockquote-text: #262424;
  --code-bg: #f1f1f1;
  --code-text: #262424;
  --code-border: #e5e5e5;
  --success-color: #28a745;
  --error-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #17a2b8;
  --success-bg: #d4edda;
  --error-bg: #f8d7da;
  --warning-bg: #fff3cd;
  --info-bg: #d1ecf1;
  --blue-color: #1e7ae0;
  --grey-color: #262424;
  --yellow-color: #fdf6c9;
  --light-blue-color: #bbd7f6;
  --light-white-color: #f9fafb;
  --sky-blue-color: #e9f7fd;
  --data-bg: var(--bg-color);
  --shadow-color: rgba(0, 0, 0, 0.1);

  /* Font Families */
  --font-primary: 'Metrophobic', sans-serif;
  --font-secondary: 'Maison Neue', sans-serif;
  --font-dyslexia: 'Merriweather', Georgia, serif;
}

/* ================================================================
   DARK THEME MODE - Explicit Dark Selection
   Complete dark theme variable set
   ================================================================ */
.theme-mode-dark {
  /* Background Colors */
  --body-bg: #003049;
  --bg-color: #003049;
  --secondary-bg: #1a1a1a;
  --section-bg: #1a1a1a;
  --section-secondary-bg: #1a1a1a;
  
  /* Card Colors */
  --card-bg: #03045e;
  --card-color: #ffffff;
  --card-reverse-bg: #03045e;
  --card-reverse-color: #ffffff;
  --card-border: #444444;
  --card-secondary-bg: #03045e;
  --card-secondary-color: #ffffff;
  --card-secondary-border: #444444;
  
  /* Text Colors */
  --text-color: #ffffff;
  --caption-color: #60a5fa;
  
  /* Link Colors */
  --link-color: #00ffff;
  --link-hover-color: #06dede;
  
  /* Border & Accent */
  --border-color: #60a5fa;
  --accent-color: #60a5fa;
  
  /* Button Colors */
  --button-bg: #1e7ae0;
  --button-text: #ffffff;
  --button-hover-bg: #3b82f6;
  --button-hover-text: #ffffff;
  
  /* Input Colors */
  --input-bg: #1a1a1a;
  --input-text: #ffffff;
  --input-border: #333333;
  --input-focus-border: #60a5fa;
  --input-placeholder: #cccccc;
  
  /* Header & Footer */
  --header-bg: #1a1a1a;
  --header-text: #ffffff;
  --footer-bg: #1a1a1a;
  --footer-text: #ffffff;
  
  /* Navigation */
  --nav-bg: #023e8a;
  --nav-text: #ffffff;
  --nav-hover-bg: #333333;
  --nav-hover-text: #00ffff;
  
  /* Table Colors */
  --table-header-bg: #333333;
  --table-header-text: #ffffff;
  --table-row-bg: #1a1a1a;
  --table-row-alt-bg: #333333;
  --table-row-text: #ffffff;
  --table-row-hover-bg: #444444;
  --table-row-hover-text: #ffffff;
  
  /* Code & Blockquote */
  --blockquote-bg: #1a1a1a;
  --blockquote-border: #333333;
  --blockquote-text: #ffffff;
  --code-bg: #333333;
  --code-text: #ffffff;
  --code-border: #444444;
  
  /* Status Colors - Same as light */
  --success-color: #28a745;
  --error-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #17a2b8;
  
  /* Status Backgrounds - Dark adjusted */
  --success-bg: #155724;
  --error-bg: #721c24;
  --warning-bg: #856404;
  --info-bg: #0c5460;
  
  /* Brand Colors */
  --blue-color: #1e7ae0;
  --grey-color: #cccccc;
  --yellow-color: #fdf6c9;
  --light-blue-color: #bbd7f6;
  --light-white-color: #003153;
  --sky-blue-color: #00a6fb;
  
  /* Computed/Dynamic Values */
  --data-bg: var(--bg-color);
  --shadow-color: rgba(255, 255, 255, 0.1);

  /* Font Families */
  --font-primary: 'Metrophobic', sans-serif;
  --font-secondary: 'Maison Neue', sans-serif;
  --font-dyslexia: 'Merriweather', Georgia, serif;
}

/* ================================================================
   FONT APPLICATION - Apply font variables to body and elements
   ================================================================ */
body, html {
  font-family: var(--font-primary);
}

h1, h2, h3, h4, h5, h6,
.heading,
.title,
.btn,
button {
  font-family: var(--font-secondary);
}

/* Dyslexia font override when body has dyslexia-font class */
body.dyslexia-font,
body.dyslexia-font *:not(.fa):not(.icon) {
  font-family: var(--font-dyslexia) !important;
}