/*-----------------------------------------------------------------------------------
    STERLING MARINE - CENTRALIZED COLOR SYSTEM
    Marine & Ocean-Inspired Color Palette
    
    This file contains all color variables used throughout the site.
    Simply update the values here to change colors site-wide.
-----------------------------------------------------------------------------------*/

:root {
  /* ===== PRIMARY MARINE COLORS ===== */
  
  /* Main Brand Colors - Deep Ocean Blues */
  --primary-navy: #0A2540;           /* Deep navy blue - main dark background */
  --primary-marine: #134074;         /* Rich marine blue - primary accent */
  --primary-ocean: #13678A;          /* Ocean blue - secondary accent */
  --primary-aqua: #45B7D1;           /* Bright aqua - highlights & CTAs */
  
  /* Light Theme Variations */
  --light-sky: #E8F4F8;              /* Very light blue - light backgrounds */
  --light-wave: #B8D4E0;             /* Soft blue-grey - light mode accents */
  
  /* ===== ACCENT COLORS ===== */
  
  /* Metallic & Nautical Accents */
  --accent-gold: #D4AF37;            /* Nautical gold - premium feel */
  --accent-silver: #C0C7CE;          /* Silver grey - secondary metallic */
  --accent-bronze: #8C7851;          /* Bronze - warm metallic alternative */
  
  /* Aqua Variations for Different States */
  --aqua-light: #5ED4F4;             /* Light aqua - hover states */
  --aqua-dark: #0E7490;              /* Dark aqua - pressed states */
  
  /* ===== BACKGROUND COLORS ===== */
  
  /* Dark Theme Backgrounds */
  --bg-darkest: #070F1A;             /* Almost black - deepest backgrounds */
  --bg-dark: #0A2540;                /* Dark navy - main dark background */
  --bg-dark-secondary: #0F3460;      /* Lighter navy - secondary sections */
  --bg-dark-card: #16213E;           /* Card/panel backgrounds (dark) */
  
  /* Light Theme Backgrounds */
  --bg-light: #F8FBFD;               /* Off-white - main light background */
  --bg-light-secondary: #E8F4F8;     /* Light blue tint - secondary sections */
  --bg-light-card: #FFFFFF;          /* Pure white - cards/panels (light) */
  
  /* Gradient Backgrounds */
  --gradient-ocean: linear-gradient(135deg, #0A2540 0%, #134074 50%, #13678A 100%);
  --gradient-aqua: linear-gradient(135deg, #13678A 0%, #45B7D1 100%);
  --gradient-dark-overlay: linear-gradient(180deg, rgba(10, 37, 64, 0.9) 0%, rgba(7, 15, 26, 0.95) 100%);
  
  /* ===== TEXT COLORS ===== */
  
  /* Dark Theme Text */
  --text-primary-dark: #FFFFFF;      /* Primary text on dark backgrounds */
  --text-secondary-dark: #B8D4E0;    /* Secondary text on dark */
  --text-muted-dark: #6B8494;        /* Muted/disabled text on dark */
  
  /* Light Theme Text */
  --text-primary-light: #0A2540;     /* Primary text on light backgrounds */
  --text-secondary-light: #134074;   /* Secondary text on light */
  --text-muted-light: #6B8494;       /* Muted/disabled text on light */
  
  /* ===== BORDER & DIVIDER COLORS ===== */
  
  --border-dark: #16213E;            /* Borders on dark backgrounds */
  --border-light: #D1E3EB;           /* Borders on light backgrounds */
  --border-accent: #45B7D1;          /* Accent borders (aqua) */
  
  /* ===== BUTTON COLORS ===== */
  
  /* Primary Buttons (Aqua) */
  --btn-primary-bg: #45B7D1;
  --btn-primary-hover: #5ED4F4;
  --btn-primary-active: #0E7490;
  --btn-primary-text: #FFFFFF;
  
  /* Secondary Buttons (Navy) */
  --btn-secondary-bg: #134074;
  --btn-secondary-hover: #13678A;
  --btn-secondary-active: #0A2540;
  --btn-secondary-text: #FFFFFF;
  
  /* Gold/Premium Buttons */
  --btn-gold-bg: #D4AF37;
  --btn-gold-hover: #E5C158;
  --btn-gold-active: #B8962D;
  --btn-gold-text: #0A2540;
  
  /* ===== STATE COLORS ===== */
  
  --success: #10B981;                /* Success green (ocean-friendly) */
  --warning: #F59E0B;                /* Warning amber */
  --error: #EF4444;                  /* Error red */
  --info: #45B7D1;                   /* Info - uses primary aqua */
  
  /* ===== OVERLAY COLORS ===== */
  
  --overlay-dark: rgba(10, 37, 64, 0.85);
  --overlay-darker: rgba(7, 15, 26, 0.95);
  --overlay-light: rgba(248, 251, 253, 0.85);
  --overlay-navy: rgba(19, 64, 116, 0.8);
  --overlay-ocean: rgba(19, 103, 138, 0.8);
  
  /* ===== SHADOW COLORS ===== */
  
  --shadow-sm: 0 2px 8px rgba(10, 37, 64, 0.1);
  --shadow-md: 0 4px 16px rgba(10, 37, 64, 0.15);
  --shadow-lg: 0 8px 32px rgba(10, 37, 64, 0.2);
  --shadow-aqua: 0 4px 20px rgba(69, 183, 209, 0.3);
  --shadow-gold: 0 4px 20px rgba(212, 175, 55, 0.3);
  
  /* ===== LEGACY COLOR MAPPINGS ===== */
  /* Map old template colors to new marine theme */
  
  /* Replace brown accent (#c5a47e, #b19777) with aqua */
  --legacy-accent: var(--primary-aqua);
  
  /* Replace old backgrounds */
  --legacy-dark-bg: var(--bg-dark);             /* Was #181818, #272727 */
  --legacy-darker-bg: var(--bg-darkest);        /* Was #141414, #212121 */
  
  /* Replace old text colors */
  --legacy-text-muted: var(--text-muted-dark);  /* Was #9f9f9f */
}

/* ===== DARK THEME (Default) ===== */
body {
  --theme-bg-primary: var(--bg-dark);
  --theme-bg-secondary: var(--bg-dark-secondary);
  --theme-bg-card: var(--bg-dark-card);
  --theme-text-primary: var(--text-primary-dark);
  --theme-text-secondary: var(--text-secondary-dark);
  --theme-text-muted: var(--text-muted-dark);
  --theme-border: var(--border-dark);
}

/* ===== LIGHT THEME ===== */
body.light-skin,
body.light-theme {
  --theme-bg-primary: var(--bg-light);
  --theme-bg-secondary: var(--bg-light-secondary);
  --theme-bg-card: var(--bg-light-card);
  --theme-text-primary: var(--text-primary-light);
  --theme-text-secondary: var(--text-secondary-light);
  --theme-text-muted: var(--text-muted-light);
  --theme-border: var(--border-light);
}

/*-----------------------------------------------------------------------------------
    COLOR USAGE GUIDE
    
    BACKGROUNDS:
    - Main sections: var(--theme-bg-primary) or var(--bg-dark)
    - Alternate sections: var(--theme-bg-secondary)
    - Cards/panels: var(--theme-bg-card)
    - Overlays: var(--overlay-dark) or var(--overlay-navy)
    
    TEXT:
    - Headings: var(--theme-text-primary) or white
    - Body text: var(--theme-text-secondary)
    - Muted text: var(--theme-text-muted)
    
    ACCENTS:
    - Primary actions/links: var(--primary-aqua)
    - Hover states: var(--aqua-light)
    - Premium elements: var(--accent-gold)
    
    BUTTONS:
    - Primary CTA: var(--btn-primary-bg) with var(--btn-primary-text)
    - Secondary: var(--btn-secondary-bg) with var(--btn-secondary-text)
    - Premium: var(--btn-gold-bg) with var(--btn-gold-text)
    
-----------------------------------------------------------------------------------*/