/**
 * Theme Definitions - Light and Dark Mode
 * Custom color scheme with amber/orange accents
 */

/* Light Theme (Default) - Clean Light Design */
:root,
.theme-light {
  /* Background Colors - Light clean palette */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f8fafc;
  --color-bg-tertiary: #f1f5f9;
  --color-bg-overlay: rgba(0, 0, 0, 0.05);
  --color-bg-gradient: linear-gradient(135deg, #FFB400 0%, #FF4E00 100%);
  --color-bg-gradient-subtle: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  --color-surface-glass: rgba(255, 255, 255, 0.8);
  
  /* Text Colors - Dark on light */
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #4a4a4a;
  --color-text-muted: #7a7a7a;
  --color-text-inverse: #ffffff;
  
  /* Border Colors - Subtle borders */
  --color-border: #e2e8f0;
  --color-border-light: #f1f5f9;
  --color-border-dark: #cbd5e1;
  
  /* Accent Colors - Amber/Orange primary */
  --color-accent: #FFB400;
  --color-accent-hover: #D79500;
  --color-accent-light: #FFF3CD;
  --color-accent-dark: #B87F00;
  --color-accent-gradient: linear-gradient(135deg, #FFB400 0%, #FF4E00 100%);
  
  /* Status Colors */
  --color-success: #00C49A;
  --color-success-hover: #00A582;
  --color-success-light: #D1F5EE;
  --color-success-dark: #008768;
  
  --color-warning: #FFB400;
  --color-warning-hover: #D79500;
  --color-warning-light: #FFF3CD;
  --color-warning-dark: #B87F00;
  
  --color-error: #FF4E00;
  --color-error-hover: #CC3E00;
  --color-error-light: #FFE5DB;
  --color-error-dark: #992F00;
  
  --color-info: #9B5DE5;
  --color-info-hover: #7E3FCF;
  --color-info-light: #F0E5FF;
  --color-info-dark: #6B2FB8;
  
  /* Focus and Interactive States */
  --color-focus: #9B5DE5;
  --color-focus-ring: rgba(155, 93, 229, 0.25);
  --color-hover-bg: rgba(0, 0, 0, 0.04);
  --color-active-bg: rgba(0, 0, 0, 0.08);
  
  /* Input Colors */
  --color-input-bg: #ffffff;
  --color-input-border: #e2e8f0;
  --color-input-border-focus: #9B5DE5;
  --color-input-text: #1a1a1a;
  --color-input-placeholder: #7a7a7a;
  
  /* Button Colors - Amber primary */
  --color-button-primary-bg: #FFB400;
  --color-button-primary-text: #1a1a1a;
  --color-button-primary-border: #FFB400;
  --color-button-primary-hover-bg: #D79500;
  --color-button-primary-hover-border: #D79500;
  
  --color-button-secondary-bg: #FF4E00;
  --color-button-secondary-text: #ffffff;
  --color-button-secondary-border: #FF4E00;
  --color-button-secondary-hover-bg: #CC3E00;
  --color-button-secondary-hover-border: #CC3E00;
  
  /* Tool-specific Colors */
  --color-tool-header-bg: var(--color-bg-secondary);
  --color-tool-border: var(--color-border);
  --color-code-bg: #f8f9fa;
  --color-code-border: #e9ecef;
}

/* Dark Theme - Custom Dark Design with Amber/Orange Accents */
.theme-dark {
  /* Background Colors - Warm dark palette */
  --color-bg-primary: #14110F;
  --color-bg-secondary: #1F1B18;
  --color-bg-tertiary: #2A2622;
  --color-bg-overlay: rgba(255, 255, 255, 0.05);
  --color-bg-gradient: linear-gradient(135deg, #FFB400 0%, #FF4E00 100%);
  --color-bg-gradient-subtle: linear-gradient(135deg, #1F1B18 0%, #2A2622 100%);
  --color-surface-glass: rgba(31, 27, 24, 0.8);
  
  /* Text Colors - Warm light text */
  --color-text-primary: #F5F5F0;
  --color-text-secondary: #B3A99F;
  --color-text-muted: #8A7F75;
  --color-text-inverse: #14110F;
  
  /* Border Colors - Subtle warm borders */
  --color-border: #2A2622;
  --color-border-light: #1F1B18;
  --color-border-dark: #3A3530;
  
  /* Accent Colors - Amber/Orange primary */
  --color-accent: #FFB400;
  --color-accent-hover: #D79500;
  --color-accent-light: #3A2F10;
  --color-accent-dark: #FFC933;
  --color-accent-gradient: linear-gradient(135deg, #FFB400 0%, #FF4E00 100%);
  
  /* Status Colors */
  --color-success: #00C49A;
  --color-success-hover: #00D9AA;
  --color-success-light: #0D332A;
  --color-success-dark: #00A582;
  
  --color-warning: #FFB400;
  --color-warning-hover: #FFC933;
  --color-warning-light: #3A2F10;
  --color-warning-dark: #D79500;
  
  --color-error: #FF4E00;
  --color-error-hover: #FF6B2B;
  --color-error-light: #3A1A0D;
  --color-error-dark: #CC3E00;
  
  --color-info: #9B5DE5;
  --color-info-hover: #B07FF0;
  --color-info-light: #2A1F3A;
  --color-info-dark: #7E3FCF;
  
  /* Focus and Interactive States */
  --color-focus: #9B5DE5;
  --color-focus-ring: rgba(155, 93, 229, 0.35);
  --color-hover-bg: rgba(255, 180, 0, 0.08);
  --color-active-bg: rgba(255, 180, 0, 0.15);
  
  /* Input Colors - Cards/Input Areas */
  --color-input-bg: #1F1B18;
  --color-input-border: #2A2622;
  --color-input-border-focus: #9B5DE5;
  --color-input-text: #F5F5F0;
  --color-input-placeholder: #8A7F75;
  
  /* Button Colors - Amber primary, Orange secondary */
  --color-button-primary-bg: #FFB400;
  --color-button-primary-text: #14110F;
  --color-button-primary-border: #FFB400;
  --color-button-primary-hover-bg: #D79500;
  --color-button-primary-hover-border: #D79500;
  
  --color-button-secondary-bg: #FF4E00;
  --color-button-secondary-text: #F5F5F0;
  --color-button-secondary-border: #FF4E00;
  --color-button-secondary-hover-bg: #FF6B2B;
  --color-button-secondary-hover-border: #FF6B2B;
  
  /* Tool-specific Colors */
  --color-tool-header-bg: var(--color-bg-secondary);
  --color-tool-border: var(--color-border);
  --color-code-bg: #1F1B18;
  --color-code-border: #2A2622;
}

/* Theme Transition */
* {
  transition: 
    background-color var(--transition-normal),
    border-color var(--transition-normal),
    color var(--transition-normal),
    box-shadow var(--transition-normal);
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --color-border: currentColor;
    --color-focus-ring: currentColor;
  }
  
  .theme-dark {
    --color-border: currentColor;
    --color-focus-ring: currentColor;
  }
}

/* Print styles */
@media print {
  :root {
    --color-bg-primary: white;
    --color-bg-secondary: white;
    --color-text-primary: black;
    --color-text-secondary: black;
    --color-border: black;
    --color-accent: black;
  }
  
  * {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
  }
}