/* ==========================================================================
   Grap-Calc-v1.1 Theme System
   Light and Dark Theme Definitions
   ========================================================================== */

/* ==========================================================================
   Light Theme (Default)
   ========================================================================== */

:root {
  /* Light Theme Colors */
  --theme-bg-primary: #ffffff;
  --theme-bg-secondary: #f9f9f9;
  --theme-bg-tertiary: #f3f3f4;
  --theme-text-primary: #1c1c1e;
  --theme-text-secondary: #3a3a3c;
  --theme-text-tertiary: #8e8e93;
  --theme-border-primary: #e5e5e7;
  --theme-border-secondary: #d1d1d6;
  
  /* Component-specific light theme overrides */
  --theme-header-bg: linear-gradient(135deg, #007aff, #005cc8);
  --theme-calc-bg: #2d2d2d;
  --theme-calc-display-bg: #1a1a1a;
  --theme-calc-text: #ffffff;
  --theme-graph-bg: #ffffff;
  --theme-graph-grid: #e0e0e0;
  --theme-graph-axis: #333333;
  --theme-shadow: rgba(0, 0, 0, 0.1);
  --theme-shadow-strong: rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   Dark Theme
   ========================================================================== */

[data-theme="dark"] {
  /* Dark Theme Colors */
  --theme-bg-primary: #1c1c1e;
  --theme-bg-secondary: #2c2c2e;
  --theme-bg-tertiary: #3a3a3c;
  --theme-text-primary: #ffffff;
  --theme-text-secondary: #e5e5e7;
  --theme-text-tertiary: #8e8e93;
  --theme-border-primary: #48484a;
  --theme-border-secondary: #636366;
  
  /* Component-specific dark theme overrides */
  --theme-header-bg: linear-gradient(135deg, #0051d5, #003d9e);
  --theme-calc-bg: #1e1e1e;
  --theme-calc-display-bg: #0d0d0d;
  --theme-calc-text: #ffffff;
  --theme-graph-bg: #2c2c2e;
  --theme-graph-grid: #48484a;
  --theme-graph-axis: #e5e5e7;
  --theme-shadow: rgba(0, 0, 0, 0.3);
  --theme-shadow-strong: rgba(0, 0, 0, 0.5);
  
  /* Update color variables for dark theme */
  --color-gray-50: #2c2c2e;
  --color-gray-100: #3a3a3c;
  --color-gray-200: #48484a;
  --color-gray-300: #636366;
  --color-gray-400: #8e8e93;
  --color-gray-500: #aeaeb2;
  --color-gray-600: #c7c7cc;
  --color-gray-700: #d1d1d6;
  --color-gray-800: #e5e5e7;
  --color-gray-900: #f2f2f7;
  
  /* Calculator specific dark theme */
  --calc-bg: var(--theme-calc-bg);
  --calc-display-bg: var(--theme-calc-display-bg);
  --calc-button-bg: #404040;
  --calc-button-hover: #505050;
  --calc-button-active: #606060;
  --calc-number-color: var(--theme-calc-text);
  
  /* Graph specific dark theme */
  --graph-bg: var(--theme-graph-bg);
  --graph-grid: var(--theme-graph-grid);
  --graph-axis: var(--theme-graph-axis);
}

/* ==========================================================================
   Auto Theme (System Preference)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Apply dark theme when system preference is dark and no explicit light theme is set */
    --theme-bg-primary: #1c1c1e;
    --theme-bg-secondary: #2c2c2e;
    --theme-bg-tertiary: #3a3a3c;
    --theme-text-primary: #ffffff;
    --theme-text-secondary: #e5e5e7;
    --theme-text-tertiary: #8e8e93;
    --theme-border-primary: #48484a;
    --theme-border-secondary: #636366;
    
    --theme-header-bg: linear-gradient(135deg, #0051d5, #003d9e);
    --theme-calc-bg: #1e1e1e;
    --theme-calc-display-bg: #0d0d0d;
    --theme-calc-text: #ffffff;
    --theme-graph-bg: #2c2c2e;
    --theme-graph-grid: #48484a;
    --theme-graph-axis: #e5e5e7;
    --theme-shadow: rgba(0, 0, 0, 0.3);
    --theme-shadow-strong: rgba(0, 0, 0, 0.5);
    
    --color-gray-50: #2c2c2e;
    --color-gray-100: #3a3a3c;
    --color-gray-200: #48484a;
    --color-gray-300: #636366;
    --color-gray-400: #8e8e93;
    --color-gray-500: #aeaeb2;
    --color-gray-600: #c7c7cc;
    --color-gray-700: #d1d1d6;
    --color-gray-800: #e5e5e7;
    --color-gray-900: #f2f2f7;
    
    --calc-bg: var(--theme-calc-bg);
    --calc-display-bg: var(--theme-calc-display-bg);
    --calc-button-bg: #404040;
    --calc-button-hover: #505050;
    --calc-button-active: #606060;
    --calc-number-color: var(--theme-calc-text);
    
    --graph-bg: var(--theme-graph-bg);
    --graph-grid: var(--theme-graph-grid);
    --graph-axis: var(--theme-graph-axis);
  }
}

/* ==========================================================================
   Theme Application
   ========================================================================== */

/* Apply theme colors to main layout */
.app-container {
  background-color: var(--theme-bg-primary);
  color: var(--theme-text-primary);
}

.app-header {
  background: var(--theme-header-bg);
}

.main-content {
  background-color: var(--theme-bg-primary);
}

/* Calculator section theming */
.calculator-section {
  background-color: var(--calc-bg);
  box-shadow: 0 10px 40px var(--theme-shadow-strong);
}

.display-container {
  background-color: var(--calc-display-bg);
}

.calculation-history {
  color: var(--theme-text-tertiary);
}

.current-input {
  color: var(--calc-number-color);
}

.result-display {
  color: var(--theme-text-secondary);
}

.equation-editor {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: var(--theme-border-primary);
  color: var(--calc-number-color);
}

[data-theme="dark"] .equation-editor {
  background-color: rgba(255, 255, 255, 0.1);
}

.equation-editor[contenteditable]:empty::before {
  color: var(--theme-text-tertiary);
}

/* Mode selector theming */
.mode-selector {
  background-color: var(--theme-bg-tertiary);
}

.mode-tab {
  color: var(--theme-text-secondary);
}

.mode-tab:hover {
  background-color: var(--theme-border-primary);
  color: var(--theme-text-primary);
}

/* Graphing section theming */
.graphing-section {
  background-color: var(--theme-bg-primary);
  box-shadow: 0 10px 40px var(--theme-shadow);
}

.graph-controls {
  background-color: var(--theme-bg-secondary);
  border-color: var(--theme-border-primary);
}

.control-group label {
  color: var(--theme-text-secondary);
}

.control-group input {
  background-color: var(--theme-bg-primary);
  border-color: var(--theme-border-primary);
  color: var(--theme-text-primary);
}

[data-theme="dark"] .control-group input {
  background-color: var(--theme-bg-tertiary);
}

.control-button {
  background-color: var(--theme-bg-primary);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.control-button:hover {
  background-color: var(--color-primary);
  color: var(--theme-bg-primary);
}

.graph-container {
  background-color: var(--graph-bg);
  border-color: var(--theme-border-primary);
}

/* Function list theming */
.function-list {
  background-color: var(--theme-bg-secondary);
  border-color: var(--theme-border-primary);
}

.function-list h3 {
  color: var(--theme-text-primary);
}

.function-entry {
  background-color: var(--theme-bg-primary);
  border-color: var(--theme-border-primary);
}

.function-color {
  border-color: var(--theme-border-secondary);
}

.function-input {
  background-color: var(--theme-bg-primary);
  border-color: var(--theme-border-primary);
  color: var(--theme-text-primary);
}

[data-theme="dark"] .function-input {
  background-color: var(--theme-bg-tertiary);
}

.add-function-btn {
  border-color: var(--theme-border-secondary);
  color: var(--theme-text-tertiary);
}

.add-function-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Data section theming */
.data-section {
  background-color: var(--theme-bg-primary);
  box-shadow: 0 10px 40px var(--theme-shadow);
}

.table-container {
  border-color: var(--theme-border-primary);
}

.data-table th {
  background-color: var(--theme-bg-secondary);
  color: var(--theme-text-primary);
}

.data-table td {
  color: var(--theme-text-primary);
  border-color: var(--theme-border-primary);
}

.data-table tr:hover {
  background-color: var(--theme-bg-secondary);
}

/* Footer theming */
.app-footer {
  background-color: var(--theme-bg-secondary);
  color: var(--theme-text-tertiary);
  border-color: var(--theme-border-primary);
}

/* Modal theming */
.modal-content {
  background-color: var(--theme-bg-primary);
  color: var(--theme-text-primary);
}

/* ==========================================================================
   Theme Toggle Animation
   ========================================================================== */

.theme-toggle {
  position: relative;
  overflow: hidden;
}

.theme-icon {
  transition: transform var(--transition-normal);
  display: inline-block;
}

.theme-toggle[data-theme="light"] .theme-icon {
  transform: rotate(0deg);
}

.theme-toggle[data-theme="dark"] .theme-icon {
  transform: rotate(180deg);
}

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

/* Disable transitions during theme change to prevent flash */
.theme-transitioning * {
  transition: none !important;
}

/* ==========================================================================
   High Contrast Theme Support
   ========================================================================== */

@media (prefers-contrast: high) {
  :root {
    --theme-border-primary: #000000;
    --theme-border-secondary: #000000;
  }
  
  [data-theme="dark"] {
    --theme-border-primary: #ffffff;
    --theme-border-secondary: #ffffff;
    --theme-text-tertiary: #ffffff;
  }
  
  .calc-button {
    border: 2px solid var(--theme-border-primary);
  }
  
  .function-input,
  .control-group input,
  .equation-editor {
    border: 2px solid var(--theme-border-primary);
  }
}

/* ==========================================================================
   Reduced Motion Support
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .theme-icon,
  * {
    transition: none !important;
  }
}

/* ==========================================================================
   Print Styles (Force Light Theme)
   ========================================================================== */

@media print {
  * {
    background-color: white !important;
    color: black !important;
    box-shadow: none !important;
  }
  
  .calculator-section {
    background-color: white !important;
  }
  
  .calc-button {
    border: 1px solid black !important;
    background-color: white !important;
    color: black !important;
  }
}