/* Theme CSS Custom Properties */
/* This file defines all theme variables for easy customization */

:root {
  /* Primary Color Palette */
  --primary-color: #007bff;
  /* RGB values for --primary-color-rgb MUST be manually kept in sync with --primary-color hex value */
  /* #007bff = rgb(0, 123, 255) - update both values when changing primary color */
  --primary-color-rgb: 0, 123, 255;
  --primary-hover: #0056b3;
  --secondary-color: #6c757d;
  --secondary-hover: #545b62;
  --danger-color: #dc3545;
  --danger-hover: #c82333;
  --success-color: #28a745;
  --success-hover: #218838;
  --warning-color: #ffc107;
  --warning-hover: #e0a800;
  --info-color: #17a2b8;
  --info-hover: #138496;
  
  /* Background Colors */
  --body-bg: #f9f9f9;
  --content-bg: #ffffff;
  --card-bg: #ffffff;
  --navbar-bg: #343a40;
  --hover-bg: #f8f9fa;
  
  /* Text Colors */
  --text-primary: #333333;
  --text-secondary: #6c757d;
  --text-light: #ffffff;
  --text-muted: #868e96;
  
  /* Border Colors */
  --border-color: #eeeeee;
  --border-light: #dee2e6;
  --border-input: #cccccc;
  
  /* Shadow and Effects */
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --card-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  
  /* Border Radius */
  --border-radius-sm: 0.25rem;
  --border-radius: 0.375rem;
  --border-radius-lg: 0.5rem;
  --border-radius-card: 8px;
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 3rem;
  
  /* Input Widths */
  --input-width-sm: 60px;
  --input-width-md: 120px;
  
  /* Typography */
  --font-family-base: Arial, sans-serif;
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.125rem;
  --line-height-base: 1.6;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  
  /* Transitions */
  --transition-base: all 0.2s ease-in-out;
  --transition-fast: all 0.15s ease-in-out;
  --transition-slow: all 0.3s ease-in-out;
}

/* Dark Theme Variables */
[data-theme="dark"] {
  --body-bg: #1a1a1a;
  --content-bg: #2d2d2d;
  --card-bg: #3a3a3a;
  --navbar-bg: #000000;
  --hover-bg: #404040;
  
  --text-primary: #ffffff;
  --text-secondary: #b0b0b0;
  --text-muted: #888888;
  
  --border-color: #444444;
  --border-light: #555555;
  --border-input: #666666;
  
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
  --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.5);
  --card-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
}

/* Sandstone Theme Variables */
[data-theme="sandstone"] {
  --primary-color: #8B4513;
  /* RGB values for --primary-color-rgb MUST be manually kept in sync with --primary-color hex value */
  /* #8B4513 = rgb(139, 69, 19) - update both values when changing primary color */
  --primary-color-rgb: 139, 69, 19;
  --primary-hover: #654321;
  --secondary-color: #A0522D;
  --secondary-hover: #8B4513;
  --danger-color: #8B0000;
  --danger-hover: #660000;
  
  --body-bg: #F5E6D3;
  --content-bg: #FFF8DC;
  --card-bg: #FFFACD;
  --navbar-bg: #2F1B14;
  --hover-bg: #F0E68C;
  
  --text-primary: #2F1B14;
  --text-secondary: #5D4037;
  --text-light: #F5E6D3;
  
  --border-color: #D2691E;
  --border-light: #DEB887;
  --border-input: #CD853F;
  
  --card-shadow: 0 2px 15px rgba(139, 69, 19, 0.2);
}

/* Forest Theme Variables */
[data-theme="forest"] {
  --primary-color: #228B22;
  /* RGB values for --primary-color-rgb MUST be manually kept in sync with --primary-color hex value */
  /* #228B22 = rgb(34, 139, 34) - update both values when changing primary color */
  --primary-color-rgb: 34, 139, 34;
  --primary-hover: #006400;
  --secondary-color: #8FBC8F;
  --secondary-hover: #556B2F;
  --danger-color: #B22222;
  --danger-hover: #8B0000;
  
  --body-bg: #F0F8F0;
  --content-bg: #F5FFFA;
  --card-bg: #FFFFFF;
  --navbar-bg: #2F4F2F;
  --hover-bg: #E0FFE0;
  
  --text-primary: #2F4F2F;
  --text-secondary: #556B2F;
  --text-light: #F0F8F0;
  
  --border-color: #90EE90;
  --border-light: #98FB98;
  --border-input: #8FBC8F;
  
  --card-shadow: 0 2px 15px rgba(34, 139, 34, 0.15);
}

/* Apply theme to body for easy switching */
body {
  background-color: var(--body-bg);
  color: var(--text-primary);
  font-family: var(--font-family-base);
  line-height: var(--line-height-base);
  transition: var(--transition-base);
}