/* =================================================
   HELO SYSTEMS - THEME VARIABLES
   QM Dokumentenmanagement - Dark/Light Mode
   ================================================= */

/* =================================================
   LIGHT MODE VARIABLES (Default)
   ================================================= */
:root {
  /* === CORE BRAND COLORS === */
  --helo-primary: #003148;        /* HELO Navy - Main Brand */
  --helo-primary-dark: #00222f;   /* Darker variant for hover states */
  --helo-primary-light: #345c6f;  /* Lighter variant for backgrounds */
  
  --helo-secondary: #98CEC7;      /* HELO Teal - Accent */
  --helo-accent: #6eb1e4;         /* Accent blue for highlights */
  
  --helo-success: #059669;        /* HELO Green - Success states */
  --helo-success-dark: #047857;   /* Darker green for hover */
  --helo-success-light: #10b981;  /* Lighter green for backgrounds */
  
  --helo-warning: #d69e2e;        /* Professional orange */
  --helo-warning-dark: #b7791f;   /* Darker orange */
  --helo-warning-light: #fbbf24;  /* Lighter orange */
  
  --helo-danger: #e53e3e;         /* Error red */
  --helo-danger-dark: #c53030;    /* Darker red */
  --helo-danger-light: #f56565;   /* Lighter red */
  
  --helo-info: #3182ce;           /* Info blue (uses accent) */
  --helo-info-dark: #2c5aa0;      /* Darker info */
  --helo-info-light: #63b3ed;     /* Lighter info */

  /* === NEUTRAL COLORS === */
  --helo-gray-50: #f8fafc;        /* Very light gray - page backgrounds */
  --helo-gray-100: #f1f5f9;       /* Light gray - card backgrounds */
  --helo-gray-200: #e2e8f0;       /* Border gray - borders, dividers */
  --helo-gray-300: #cbd5e1;       /* Medium-light gray */
  --helo-gray-400: #94a3b8;       /* Medium gray */
  --helo-gray-500: #64748b;       /* Medium gray - placeholder text */
  --helo-gray-600: #475569;       /* Medium-dark gray - secondary text */
  --helo-gray-700: #334155;       /* Dark gray - primary text */
  --helo-gray-800: #1e293b;       /* Very dark gray */
  --helo-gray-900: #0f172a;       /* Almost black - headings */

  /* === SEMANTIC COLORS === */
  --background-primary: #ffffff;   /* Main background */
  --background-secondary: var(--helo-gray-50);  /* Secondary background */
  --background-tertiary: var(--helo-gray-100);  /* Card backgrounds */
  
  --text-primary: var(--helo-gray-900);     /* Main text color */
  --text-secondary: var(--helo-gray-600);   /* Secondary text */
  --text-muted: var(--helo-gray-500);       /* Muted text */
  --text-inverse: #ffffff;                  /* Text on dark backgrounds */
  
  --border-color: var(--helo-gray-200);     /* Default border color */
  --border-light: var(--helo-gray-100);     /* Light border */
  --border-strong: var(--helo-gray-300);    /* Strong border */

  /* === INTERACTIVE STATES === */
  --focus-ring: rgba(0, 49, 72, 0.25);     /* Focus outline color */
  --hover-overlay: rgba(0, 0, 0, 0.05);    /* Light hover overlay */
  --active-overlay: rgba(0, 0, 0, 0.1);    /* Active state overlay */

  /* === SHADOWS === */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* === LEGACY SUPPORT === */
  --primary-blue: var(--helo-primary);
  --secondary-blue: var(--helo-gray-600);
  --warning-yellow: var(--helo-warning);
  --success-green: var(--helo-success);
  --danger-red: var(--helo-danger);
  --info-blue: var(--helo-info);
  --light-gray: var(--helo-gray-50);
  --dark-gray: var(--helo-gray-700);
}

/* =================================================
   DARK MODE VARIABLES
   ================================================= */
[data-theme="dark"] {
  /* === CORE BRAND COLORS (Adjusted for dark backgrounds) === */
  --helo-primary: #6eb1c8;        /* Lighter HELO Navy for dark mode */
  --helo-primary-dark: #4a90a8;   /* Darker variant */
  --helo-primary-light: #98CEC7;  /* Teal light for better contrast */
  
  --helo-secondary: #98CEC7;      /* HELO Teal stays consistent */
  --helo-accent: #C2F2EF;         /* Lighter teal for dark mode accents */
  
  --helo-success: #10b981;        /* Lighter HELO Green */
  --helo-success-dark: #059669;   /* Darker green */
  --helo-success-light: #34d399;  /* Much lighter green */
  
  --helo-warning: #fbbf24;        /* Lighter orange for visibility */
  --helo-warning-dark: #d69e2e;   /* Darker orange */
  --helo-warning-light: #fcd34d;  /* Light orange */
  
  --helo-danger: #f87171;         /* Lighter red */
  --helo-danger-dark: #dc2626;    /* Darker red */
  --helo-danger-light: #fca5a5;   /* Light red */
  
  --helo-info: #60a5fa;           /* Lighter info blue */
  --helo-info-dark: #4a90a8;      /* Darker info */
  --helo-info-light: #93c5fd;     /* Light info */

  /* === NEUTRAL COLORS (Inverted and adjusted) === */
  --helo-gray-50: #020617;        /* Very dark - inverted from light mode */
  --helo-gray-100: #0f172a;       /* Navy background - main dark background */
  --helo-gray-200: #1e293b;       /* Dark gray - card backgrounds */
  --helo-gray-300: #334155;       /* Medium-dark gray */
  --helo-gray-400: #475569;       /* Medium gray */
  --helo-gray-500: #64748b;       /* Medium-light gray */
  --helo-gray-600: #94a3b8;       /* Light gray - secondary text */
  --helo-gray-700: #cbd5e1;       /* Very light gray - primary text */
  --helo-gray-800: #e2e8f0;       /* Near white */
  --helo-gray-900: #f1f5f9;       /* Almost white - headings */

  /* === SEMANTIC COLORS === */
  --background-primary: var(--helo-gray-100);   /* Navy main background */
  --background-secondary: var(--helo-gray-50);  /* Very dark secondary */
  --background-tertiary: var(--helo-gray-200);  /* Dark card backgrounds */
  
  --text-primary: var(--helo-gray-900);     /* Very light text */
  --text-secondary: var(--helo-gray-600);   /* Medium-light text */
  --text-muted: var(--helo-gray-500);       /* Muted text */
  --text-inverse: var(--helo-gray-900);     /* Light text on dark backgrounds */
  
  --border-color: var(--helo-gray-300);     /* Dark border */
  --border-light: var(--helo-gray-200);     /* Very dark border */
  --border-strong: var(--helo-gray-400);    /* Stronger dark border */

  /* === INTERACTIVE STATES === */
  --focus-ring: rgba(59, 130, 246, 0.4);   /* Stronger focus ring for dark mode */
  --hover-overlay: rgba(255, 255, 255, 0.05);  /* Light overlay on dark */
  --active-overlay: rgba(255, 255, 255, 0.1);  /* Active overlay */

  /* === SHADOWS (Adjusted for dark mode) === */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.2);

  /* === LEGACY SUPPORT === */
  --primary-blue: var(--helo-primary);
  --secondary-blue: var(--helo-gray-600);
  --warning-yellow: var(--helo-warning);
  --success-green: var(--helo-success);
  --danger-red: var(--helo-danger);
  --info-blue: var(--helo-info);
  --light-gray: var(--helo-gray-200);  /* Adjusted for dark mode */
  --dark-gray: var(--helo-gray-600);   /* Adjusted for dark mode */
}

/* =================================================
   AUTOMATIC DARK MODE (System Preference)
   ================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    /* Apply dark mode variables when system preference is dark
       and no explicit theme is set */

    /* === CORE BRAND COLORS === */
    --helo-primary: #6eb1c8;
    --helo-primary-dark: #4a90a8;
    --helo-primary-light: #98CEC7;

    --helo-secondary: #98CEC7;
    --helo-accent: #C2F2EF;
    
    --helo-success: #10b981;
    --helo-success-dark: #059669;
    --helo-success-light: #34d399;
    
    --helo-warning: #fbbf24;
    --helo-warning-dark: #d69e2e;
    --helo-warning-light: #fcd34d;
    
    --helo-danger: #f87171;
    --helo-danger-dark: #dc2626;
    --helo-danger-light: #fca5a5;
    
    --helo-info: #60a5fa;
    --helo-info-dark: #4a90a8;
    --helo-info-light: #93c5fd;

    /* === NEUTRAL COLORS === */
    --helo-gray-50: #020617;
    --helo-gray-100: #0f172a;
    --helo-gray-200: #1e293b;
    --helo-gray-300: #334155;
    --helo-gray-400: #475569;
    --helo-gray-500: #64748b;
    --helo-gray-600: #94a3b8;
    --helo-gray-700: #cbd5e1;
    --helo-gray-800: #e2e8f0;
    --helo-gray-900: #f1f5f9;

    /* === SEMANTIC COLORS === */
    --background-primary: var(--helo-gray-100);
    --background-secondary: var(--helo-gray-50);
    --background-tertiary: var(--helo-gray-200);
    
    --text-primary: var(--helo-gray-900);
    --text-secondary: var(--helo-gray-600);
    --text-muted: var(--helo-gray-500);
    --text-inverse: var(--helo-gray-900);
    
    --border-color: var(--helo-gray-300);
    --border-light: var(--helo-gray-200);
    --border-strong: var(--helo-gray-400);

    /* === INTERACTIVE STATES === */
    --focus-ring: rgba(59, 130, 246, 0.4);
    --hover-overlay: rgba(255, 255, 255, 0.05);
    --active-overlay: rgba(255, 255, 255, 0.1);

    /* === SHADOWS === */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
  }
}

/* =================================================
   HIGH CONTRAST MODE SUPPORT
   ================================================= */
@media (prefers-contrast: high) {
  :root {
    --helo-primary: #000080;
    --helo-success: #006400;
    --helo-danger: #8b0000;
    --border-color: #000000;
    --text-primary: #000000;
    --shadow-md: 0 0 0 2px #000000;
  }
  
  [data-theme="dark"] {
    --helo-primary: #6495ed;
    --helo-success: #90ee90;
    --helo-danger: #ff6347;
    --border-color: #ffffff;
    --text-primary: #ffffff;
    --background-primary: #000000;
    --shadow-md: 0 0 0 2px #ffffff;
  }
}

/* =================================================
   REDUCED MOTION SUPPORT
   ================================================= */
@media (prefers-reduced-motion: reduce) {
  :root {
    /* Remove transitions for users who prefer reduced motion */
    --transition-theme: none;
    --transition-fast: none;
    --transition-normal: none;
    --transition-slow: none;
  }
}