/* CSS Custom Properties for Themes */
:root {
  /* Dark Theme Colors - Based on provided color scheme */
  --color-primary: #1fa3ec;        /* COLOR_BUTTON */
  --color-primary-dark: #0e70a4;   /* COLOR_BUTTON_HOVER */
  --color-secondary: #47c266;      /* COLOR_BUTTON_SAVE */
  
  --color-background: #252525;     /* COLOR_BACKGROUND - Very dark gray (mostly black) */
  --color-surface: #4f4f4f;        /* COLOR_FORM - Very dark gray */
  --color-surface-variant: #3a3a3a; /* Более темный серый для лучшего контраста */
  --color-surface-container: #2a2a2a; /* Еще более темный для контейнеров */
  
  --color-on-surface: #eaeaea;     /* COLOR_TEXT - Very light gray */
  --color-on-surface-variant: #b0b0b0; /* Немного темнее для вторичного текста */
  
  --color-success: #008000;        /* COLOR_TEXT_SUCCESS - Dark lime green */
  --color-error: #ff5661;          /* COLOR_TEXT_WARNING - Brick Red */
  --color-warning: #ff5661;        /* COLOR_TEXT_WARNING - Brick Red */
  
  --color-code-background: #1f1f1f; /* COLOR_CONSOLE - Very dark gray (mostly black) */
  --color-code-text: #65c115;      /* COLOR_CONSOLE_TEXT - Strong Green */
  --color-value-background: #1f1f1f;
  --color-value-text: #65c115;
  --color-critical-value: #ff5661;
  --color-normal-value: #65c115;
  
  /* Additional colors from the provided scheme */
  --color-input-text: #000;           /* COLOR_INPUT_TEXT - Black */
  --color-input: #ddd;                /* COLOR_INPUT - Very light gray */
  --color-button-text: #faffff;       /* COLOR_BUTTON_TEXT - Very pale (mostly white) cyan */
  --color-button-reset: #d43535;      /* COLOR_BUTTON_RESET - Strong red */
  --color-button-reset-hover: #931f1f; /* COLOR_BUTTON_RESET_HOVER - Dark red */
  --color-button-save: #47c266;       /* COLOR_BUTTON_SAVE - Moderate lime green */
  --color-button-save-hover: #5aaf6f; /* COLOR_BUTTON_SAVE_HOVER - Dark moderate lime green */
  --color-timer-tab-text: #faffff;    /* COLOR_TIMER_TAB_TEXT - Very pale (mostly white) cyan */
  
  --color-divider: #4f4f4f;
  --color-shadow: rgba(0, 0, 0, 0.3);
  
  /* Typography */
  --font-family-display: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-text: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  
  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 var(--color-shadow);
  --shadow-md: 0 4px 6px -1px var(--color-shadow);
  --shadow-lg: 0 10px 15px -3px var(--color-shadow);
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;
}

/* Light Theme */
[data-theme="light"] {
  --color-background: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-surface-variant: #F1F5F9;
  
  --color-on-surface: #0F172A;
  --color-on-surface-variant: #64748B;
  
  --color-divider: #E2E8F0;
  --color-shadow: rgba(0, 0, 0, 0.08);
  
  --color-value-background: #F0F9FF;
  --color-value-text: #0369A1;
}

/* Dark Theme */
[data-theme="dark"] {
  --color-background: #252525;     /* COLOR_BACKGROUND - Very dark gray (mostly black) */
  --color-surface: #4f4f4f;        /* COLOR_FORM - Very dark gray */
  --color-surface-variant: #3a3a3a; /* Более темный серый для лучшего контраста */
  --color-surface-container: #2a2a2a; /* Еще более темный для контейнеров */
  
  --color-on-surface: #eaeaea;     /* COLOR_TEXT - Very light gray */
  --color-on-surface-variant: #b0b0b0; /* Немного темнее для вторичного текста */
  
  --color-divider: #4f4f4f;
  --color-shadow: rgba(0, 0, 0, 0.3);
  
  --color-value-background: #1f1f1f;
  --color-value-text: #65c115;
  --color-code-background: #1f1f1f; /* COLOR_CONSOLE - Very dark gray (mostly black) */
  --color-code-text: #65c115;      /* COLOR_CONSOLE_TEXT - Strong Green */
  --color-critical-value: #ff5661;
  --color-normal-value: #65c115;
  
  /* Additional colors for dark theme */
  --color-input-text: #000;           /* COLOR_INPUT_TEXT - Black */
  --color-input: #ddd;                /* COLOR_INPUT - Very light gray */
  --color-button-text: #faffff;       /* COLOR_BUTTON_TEXT - Very pale (mostly white) cyan */
  --color-button-reset: #d43535;      /* COLOR_BUTTON_RESET - Strong red */
  --color-button-reset-hover: #931f1f; /* COLOR_BUTTON_RESET_HOVER - Dark red */
  --color-button-save: #47c266;       /* COLOR_BUTTON_SAVE - Moderate lime green */
  --color-button-save-hover: #5aaf6f; /* COLOR_BUTTON_SAVE_HOVER - Dark moderate lime green */
  --color-timer-tab-text: #faffff;    /* COLOR_TIMER_TAB_TEXT - Very pale (mostly white) cyan */
}

/* System Theme Detection */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-background: #252525;     /* COLOR_BACKGROUND - Very dark gray (mostly black) */
    --color-surface: #4f4f4f;        /* COLOR_FORM - Very dark gray */
    --color-surface-variant: #3a3a3a; /* Более темный серый для лучшего контраста */
    --color-surface-container: #2a2a2a; /* Еще более темный для контейнеров */
    
    --color-on-surface: #eaeaea;     /* COLOR_TEXT - Very light gray */
    --color-on-surface-variant: #b0b0b0; /* Немного темнее для вторичного текста */
    
    --color-divider: #4f4f4f;
    --color-shadow: rgba(0, 0, 0, 0.3);
    
    --color-value-background: #1f1f1f;
    --color-value-text: #65c115;
    --color-code-background: #1f1f1f; /* COLOR_CONSOLE - Very dark gray (mostly black) */
    --color-code-text: #65c115;      /* COLOR_CONSOLE_TEXT - Strong Green */
    --color-critical-value: #ff5661;
    --color-normal-value: #65c115;
    
    /* Additional colors for system dark theme */
    --color-input-text: #000;           /* COLOR_INPUT_TEXT - Black */
    --color-input: #ddd;                /* COLOR_INPUT - Very light gray */
    --color-button-text: #faffff;       /* COLOR_BUTTON_TEXT - Very pale (mostly white) cyan */
    --color-button-reset: #d43535;      /* COLOR_BUTTON_RESET - Strong red */
    --color-button-reset-hover: #931f1f; /* COLOR_BUTTON_RESET_HOVER - Dark red */
    --color-button-save: #47c266;       /* COLOR_BUTTON_SAVE - Moderate lime green */
    --color-button-save-hover: #5aaf6f; /* COLOR_BUTTON_SAVE_HOVER - Dark moderate lime green */
    --color-timer-tab-text: #faffff;    /* COLOR_TIMER_TAB_TEXT - Very pale (mostly white) cyan */
  }
}

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