/**
 * Staff Tools Shared Theme System
 *
 * Themes:
 * - atlassian-blue (default): Atlassian/Jira inspired colors
 * - microsoft-blue: Microsoft/Azure inspired colors
 * - dark: Dark mode with Atlassian blue accents
 *
 * Usage:
 * 1. Include this file in your HTML: <link rel="stylesheet" href="../../shared/theme/variables.css">
 * 2. Set theme via: document.documentElement.setAttribute('data-theme', 'dark')
 * 3. Or let user preference auto-detect via prefers-color-scheme
 */

/* ============================================
   Atlassian Blue Theme (Default)
   ============================================ */
:root,
[data-theme="atlassian-blue"] {
  /* Primary colors */
  --color-primary: #0052cc;
  --color-primary-hover: #0747a6;
  --color-primary-light: #deebff;

  /* Semantic colors */
  --color-success: #00875a;
  --color-success-hover: #006644;
  --color-success-light: #e3fcef;

  --color-danger: #de350b;
  --color-danger-hover: #bf2600;
  --color-danger-light: #ffebe6;

  --color-warning: #ff991f;
  --color-warning-hover: #ff8b00;
  --color-warning-light: #fffae6;

  --color-info: #0065ff;
  --color-info-light: #e6f0ff;

  /* Backgrounds */
  --color-bg: #f5f5f5;
  --color-bg-card: #ffffff;
  --color-bg-header: #1a1a2e;
  --color-bg-hover: #f0f0f0;
  --color-bg-active: #e6f0ff;

  /* Text */
  --color-text: #333333;
  --color-text-secondary: #666666;
  --color-text-muted: #888888;
  --color-text-inverse: #ffffff;
  --color-text-header: #ffffff;  /* Always light - for dark headers */
  --color-text-link: #0052cc;
  --color-text-link-hover: #0065ff;

  /* Borders */
  --color-border: #e0e0e0;
  --color-border-light: #f0f0f0;
  --color-border-focus: #0052cc;

  /* Form elements */
  --color-input-bg: #ffffff;
  --color-input-border: #cccccc;
  --color-input-focus: #0052cc;
  --color-disabled: #cccccc;
  --color-disabled-bg: #f9f9f9;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;
}

/* ============================================
   Microsoft Blue Theme
   ============================================ */
[data-theme="microsoft-blue"] {
  /* Primary colors - Microsoft/Azure palette */
  --color-primary: #0078d4;
  --color-primary-hover: #106ebe;
  --color-primary-light: #deecf9;

  /* Semantic colors */
  --color-success: #107c10;
  --color-success-hover: #0b5c0b;
  --color-success-light: #dff6dd;

  --color-danger: #d13438;
  --color-danger-hover: #a4262c;
  --color-danger-light: #fde7e9;

  --color-warning: #ffb900;
  --color-warning-hover: #d39e00;
  --color-warning-light: #fff4ce;

  --color-info: #0078d4;
  --color-info-light: #eff6fc;

  /* Backgrounds */
  --color-bg: #faf9f8;
  --color-bg-card: #ffffff;
  --color-bg-header: #0078d4;
  --color-bg-hover: #f3f2f1;
  --color-bg-active: #edebe9;

  /* Text */
  --color-text: #323130;
  --color-text-secondary: #605e5c;
  --color-text-muted: #a19f9d;
  --color-text-inverse: #ffffff;
  --color-text-header: #ffffff;  /* Always light - for dark headers */
  --color-text-link: #0078d4;
  --color-text-link-hover: #106ebe;

  /* Borders */
  --color-border: #edebe9;
  --color-border-light: #f3f2f1;
  --color-border-focus: #0078d4;

  /* Form elements */
  --color-input-bg: #ffffff;
  --color-input-border: #8a8886;
  --color-input-focus: #0078d4;
  --color-disabled: #c8c6c4;
  --color-disabled-bg: #f3f2f1;
}

/* ============================================
   Dark Theme
   ============================================ */
[data-theme="dark"] {
  /* Primary colors - Atlassian blue adapted for dark */
  --color-primary: #579dff;
  --color-primary-hover: #85b8ff;
  --color-primary-light: #1c2b41;

  /* Semantic colors */
  --color-success: #4bce97;
  --color-success-hover: #7ee2b8;
  --color-success-light: #1c3329;

  --color-danger: #f87168;
  --color-danger-hover: #ff9c8f;
  --color-danger-light: #42221f;

  --color-warning: #f5cd47;
  --color-warning-hover: #f8e6a0;
  --color-warning-light: #3d3419;

  --color-info: #579dff;
  --color-info-light: #1c2b41;

  /* Backgrounds */
  --color-bg: #1d2125;
  --color-bg-card: #22272b;
  --color-bg-header: #161a1d;
  --color-bg-hover: #282e33;
  --color-bg-active: #2c333a;

  /* Text */
  --color-text: #b6c2cf;
  --color-text-secondary: #9fadbc;
  --color-text-muted: #738496;
  --color-text-inverse: #1d2125;
  --color-text-header: #ffffff;  /* Always light - for dark headers */
  --color-text-link: #579dff;
  --color-text-link-hover: #85b8ff;

  /* Borders */
  --color-border: #3d4449;
  --color-border-light: #2c333a;
  --color-border-focus: #579dff;

  /* Form elements */
  --color-input-bg: #22272b;
  --color-input-border: #3d4449;
  --color-input-focus: #579dff;
  --color-disabled: #3d4449;
  --color-disabled-bg: #282e33;

  /* Shadows - more subtle in dark mode */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
}

/* ============================================
   Retro Theme (High Contrast Green on Black)
   ============================================ */
[data-theme="retro"] {
  /* Primary colors - Terminal green */
  --color-primary: #00ff00;
  --color-primary-hover: #33ff33;
  --color-primary-light: #003300;

  /* Semantic colors */
  --color-success: #00ff00;
  --color-success-hover: #33ff33;
  --color-success-light: #003300;

  --color-danger: #ff3333;
  --color-danger-hover: #ff6666;
  --color-danger-light: #330000;

  --color-warning: #ffff00;
  --color-warning-hover: #ffff66;
  --color-warning-light: #333300;

  --color-info: #00ffff;
  --color-info-light: #003333;

  /* Backgrounds */
  --color-bg: #000000;
  --color-bg-card: #0a0a0a;
  --color-bg-header: #000000;
  --color-bg-hover: #1a1a1a;
  --color-bg-active: #003300;

  /* Text */
  --color-text: #00ff00;
  --color-text-secondary: #00cc00;
  --color-text-muted: #009900;
  --color-text-inverse: #000000;
  --color-text-header: #00ff00;
  --color-text-link: #00ffff;
  --color-text-link-hover: #66ffff;

  /* Borders */
  --color-border: #00ff00;
  --color-border-light: #006600;
  --color-border-focus: #00ff00;

  /* Form elements */
  --color-input-bg: #0a0a0a;
  --color-input-border: #00ff00;
  --color-input-focus: #00ff00;
  --color-disabled: #006600;
  --color-disabled-bg: #0a0a0a;

  /* Shadows - green glow effect */
  --shadow-sm: 0 0 5px rgba(0, 255, 0, 0.3);
  --shadow-md: 0 0 10px rgba(0, 255, 0, 0.4);
  --shadow-lg: 0 0 20px rgba(0, 255, 0, 0.5);
}

/* ============================================
   System Preference Auto-Detection
   When no data-theme is set, respect OS preference
   ============================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    /* Primary colors */
    --color-primary: #579dff;
    --color-primary-hover: #85b8ff;
    --color-primary-light: #1c2b41;

    /* Semantic colors */
    --color-success: #4bce97;
    --color-success-hover: #7ee2b8;
    --color-success-light: #1c3329;

    --color-danger: #f87168;
    --color-danger-hover: #ff9c8f;
    --color-danger-light: #42221f;

    --color-warning: #f5cd47;
    --color-warning-hover: #f8e6a0;
    --color-warning-light: #3d3419;

    --color-info: #579dff;
    --color-info-light: #1c2b41;

    /* Backgrounds */
    --color-bg: #1d2125;
    --color-bg-card: #22272b;
    --color-bg-header: #161a1d;
    --color-bg-hover: #282e33;
    --color-bg-active: #2c333a;

    /* Text */
    --color-text: #b6c2cf;
    --color-text-secondary: #9fadbc;
    --color-text-muted: #738496;
    --color-text-inverse: #1d2125;
    --color-text-header: #ffffff;  /* Always light - for dark headers */
    --color-text-link: #579dff;
    --color-text-link-hover: #85b8ff;

    /* Borders */
    --color-border: #3d4449;
    --color-border-light: #2c333a;
    --color-border-focus: #579dff;

    /* Form elements */
    --color-input-bg: #22272b;
    --color-input-border: #3d4449;
    --color-input-focus: #579dff;
    --color-disabled: #3d4449;
    --color-disabled-bg: #282e33;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
  }
}