/* ==========================================================================
   serviceR Color System
   WCAG AA Compliant
   ========================================================================== */

:root {
  /* ---------------------------------------------------------
     SURFACE & NEUTRAL COLORS (Light Mode)
     --------------------------------------------------------- */
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #F8FAFC; /* Slate 50 */
  --color-bg-tertiary: #F1F5F9; /* Slate 100 */

  --color-text-primary: #0F172A; /* Slate 900 - High contrast on white */
  --color-text-secondary: #475569; /* Slate 600 */
  --color-text-tertiary: #64748B; /* Slate 500 */

  --color-border: #E2E8F0; /* Slate 200 */
  --color-border-hover: #CBD5E1; /* Slate 300 */

  /* Footer Colors */
  --color-footer-bg: #1E293B; /* Slate 800 */
  --color-footer-text: #94A3B8; /* Slate 400 */

  /* ---------------------------------------------------------
     BRAND COLORS (Light Mode)
     --------------------------------------------------------- */
  /* Primary (Deep Tech Blue/Slate) */
  --color-primary: #1E293B; /* Slate 800 - Use for primary buttons, headers */
  --color-primary-hover: #0F172A; /* Slate 900 */
  --color-primary-content: #FFFFFF; /* Text on primary background */

  /* Secondary / Accent (Neon Cyan) */
  /* Neon cyan is too light for text on white, so we use a darker cyan variant for text.
     The bright neon cyan is reserved for backgrounds where we use dark text. */
  --color-accent: #008A99; /* Cyan 700 - Safe for text/icons on white bg (WCAG AA) */
  --color-accent-bg: #00E5FF; /* Neon Cyan - Use for decorative backgrounds/buttons */
  --color-accent-content: #0F172A; /* Slate 900 text on Neon Cyan background */

  /* ---------------------------------------------------------
     SEMANTIC FEEDBACK COLORS (Light Mode)
     --------------------------------------------------------- */
  --color-success: #047857; /* Emerald 700 */
  --color-success-bg: #D1FAE5; /* Emerald 100 */
  
  --color-warning: #B45309; /* Amber 700 */
  --color-warning-bg: #FEF3C7; /* Amber 100 */
  
  --color-error: #B91C1C; /* Red 700 */
  --color-error-bg: #FEE2E2; /* Red 100 */
}

/* ==========================================================================
   DARK MODE OVERRIDES
   Automatically adapts when the user's OS is set to dark mode.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    /* ---------------------------------------------------------
       SURFACE & NEUTRAL COLORS (Dark Mode)
       --------------------------------------------------------- */
    --color-bg-primary: #020617; /* Slate 950 */
    --color-bg-secondary: #0F172A; /* Slate 900 */
    --color-bg-tertiary: #1E293B; /* Slate 800 */

    --color-text-primary: #F8FAFC; /* Slate 50 */
    --color-text-secondary: #94A3B8; /* Slate 400 */
    --color-text-tertiary: #64748B; /* Slate 500 */

    --color-border: #334155; /* Slate 700 */
    --color-border-hover: #475569; /* Slate 600 */

    /* Footer Colors */
    --color-footer-bg: #0F172A; /* Slate 900 */
    --color-footer-text: #94A3B8; /* Slate 400 */

    /* ---------------------------------------------------------
       BRAND COLORS (Dark Mode)
       --------------------------------------------------------- */
    /* Primary */
    --color-primary: #F8FAFC; /* Slate 50 - High contrast buttons */
    --color-primary-hover: #CBD5E1; /* Slate 300 */
    --color-primary-content: #0F172A; /* Dark text on light button */

    /* Secondary / Accent (Neon Cyan) */
    /* In dark mode, Neon Cyan shines and passes contrast requirements for text! */
    --color-accent: #00E5FF; /* Neon Cyan 500 - Safe for text/icons on dark bg */
    --color-accent-bg: #00E5FF; /* Neon Cyan */
    --color-accent-content: #0F172A; /* Dark text on Neon Cyan */

    /* ---------------------------------------------------------
       SEMANTIC FEEDBACK COLORS (Dark Mode)
       Shifted to lighter hues for text contrast on dark backgrounds
       --------------------------------------------------------- */
    --color-success: #34D399; /* Emerald 400 */
    --color-success-bg: #064E3B; /* Emerald 900 */
    
    --color-warning: #FBBF24; /* Amber 400 */
    --color-warning-bg: #78350F; /* Amber 900 */
    
    --color-error: #F87171; /* Red 400 */
    --color-error-bg: #7F1D1D; /* Red 900 */
  }
}