/* css/core/themes.css - Theme Color Definitions */
/* v1.1 - Cleaned up to only include actively used variables */
/* Add new themes here - only color overrides needed! */
/* Note: All unused variables have been removed. :root in variables.css provides fallbacks. */

/* ============================================================================
   DARK THEME - Essential Color Overrides Only
   ============================================================================ */

body.theme-dark {
  /* ===== BACKGROUNDS (8 variables) ===== */
  --bg-primary: #000; /* Solid black widget backdrops */
  --bg-secondary: #000; /* Black for non-current day columns in calendar */
  --bg-tertiary: #333; /* Lighter gray for borders and headers */
  --bg-modal-backdrop: rgba(0, 0, 0, 0.7);
  --bg-button: #666;
  --bg-active: #1a1a1a; /* Darker gray for current day column */
  --bg-primary-semi-transparent: rgba(34, 34, 34, 0.9);
  --bg-selected-fill: rgba(168, 176, 184, 0.2);

  /* ===== TEXT (3 variables) ===== */
  --text-primary: #fff;
  --text-secondary: #ccc;
  --text-muted: #333; /* Darker gray for scrollbars and muted elements */

  /* ===== ACCENTS (5 variables) ===== */
  --accent-primary: #00aaff;
  --accent-secondary: #ffaa00;
  --accent-selection: #a8b0b8;
  --accent-current-time: #00aaff; /* current time indicator & today marker */
  --grid-gap-color: #000; /* Black border between widgets */

  /* ===== GLOW EFFECTS (1 variable) ===== */
  --glow-selected: 0 0 20px rgba(168, 176, 184, 0.6), 0 0 45px rgba(168, 176, 184, 0.3);

  /* ===== THEME ASSETS (2 variables) ===== */
  --sidebar-logo-src: url('/artwork/Dashie_Full_Logo_White_Transparent.png');
  --sidebar-icon-filter: invert(100%);

}

/* ============================================================================
   LIGHT THEME - Essential Color Overrides Only
   ============================================================================ */

body.theme-light,
body:not([class*="theme-"]) {
  /* ===== BACKGROUNDS (8 variables) ===== */
  --bg-primary: #FCFCFF;
  --bg-secondary: #FCFCFF; /* Same as primary in light theme */
  --bg-tertiary: #eeeeee;
  --bg-modal-backdrop: rgba(0, 0, 0, 0.5);
  --bg-button: #90a4ae;
  --bg-active: rgba(33, 150, 243, 0.2);
  --bg-primary-semi-transparent: rgba(227, 242, 253, 0.9);
  --bg-selected-fill: rgba(33, 150, 243, 0.2);

  /* ===== TEXT (3 variables) ===== */
  --text-primary: #424242;
  --text-secondary: #616161;
  --text-muted: #9e9e9e;

  /* ===== ACCENTS (5 variables) ===== */
  --accent-primary: #2196f3;
  --accent-secondary: #ff9800;
  --accent-selection: #6b7280;
  --accent-current-time: #00aaff; /* current time indicator & today marker */
  --grid-gap-color: #9eb4fe;

  /* ===== GLOW EFFECTS (1 variable) ===== */
  --glow-selected: 0 0 15px rgba(107, 114, 128, 0.5), 0 0 30px rgba(107, 114, 128, 0.25);

  /* ===== THEME ASSETS (2 variables) ===== */
  --sidebar-logo-src: url('/artwork/Dashie_Full_Logo_Black_Transparent.png');
  --sidebar-icon-filter: invert(20%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.3);

}

/* ============================================================================
   HALLOWEEN DARK THEME - Spooky colors with dark purple/orange palette
   ============================================================================ */

body.theme-halloween-dark {
  /* ===== BACKGROUNDS (8 variables) ===== */
  --bg-primary: #1A0A1F; /* Near-black with purple tint */
  --bg-secondary: #2D1F1A; /* Dark with orange tint */
  --bg-tertiary: #3D2F2A; /* Lighter brown-purple */
  --bg-modal-backdrop: rgba(26, 10, 31, 0.8); /* Purple-tinted backdrop */
  --bg-button: #6B1FA0; /* Deep purple */
  --bg-active: rgba(255, 107, 26, 0.3); /* Orange highlight */
  --bg-primary-semi-transparent: rgba(26, 10, 31, 0.9);
  --bg-selected-fill: rgba(255, 107, 26, 0.2); /* Orange selection */

  /* ===== TEXT (3 variables) ===== */
  --text-primary: #fff;
  --text-secondary: #ccc;
  --text-muted: #999;

  /* ===== ACCENTS (5 variables) ===== */
  --accent-primary: #39FF14; /* Neon green */
  --accent-secondary: #FF6B1A; /* Bright Halloween orange */
  --accent-selection: #a8b0b8;
  --accent-current-time: #FF6B1A; /* Orange current time indicator */
  --grid-gap-color: #1A0A1F; /* Match bg-primary for seamless look */

  /* ===== GLOW EFFECTS (1 variable) ===== */
  --glow-selected: 0 0 20px rgba(255, 107, 26, 0.6), 0 0 45px rgba(255, 107, 26, 0.3); /* Orange glow */

  /* ===== THEME ASSETS (2 variables) ===== */
  --sidebar-logo-src: url('/artwork/Dashie_Full_Logo_White_Transparent.png');
  --sidebar-icon-filter: invert(100%);

}


/* ============================================================================
   HALLOWEEN LIGHT THEME - Festive autumn colors with light backgrounds (Backup)
   ============================================================================ */

body.theme-halloween-light {
  --bg-primary: #FCFCFF;
  --bg-secondary: #FCFCFF; /* Same as primary in light theme */
  --bg-tertiary: #eeeeee;
  --bg-modal-backdrop: rgba(0, 0, 0, 0.5);
  --bg-button: #90a4ae;
  --bg-active: #FFD4A3;
  --bg-primary-semi-transparent: rgba(227, 242, 253, 0.9);
  --bg-selected-fill: rgba(33, 150, 243, 0.2);

  /* ===== TEXT (3 variables) ===== */
  --text-primary: #424242;
  --text-secondary: #616161;
  --text-muted: #9e9e9e;

  /* ===== ACCENTS (5 variables) ===== */
  --accent-primary: #2196f3;
  --accent-secondary: #ff9800;
  --accent-selection: #6b7280;
  --accent-current-time: #ff9800;
  --grid-gap-color: #ff9800;

  /* ===== GLOW EFFECTS (1 variable) ===== */
  --glow-selected: 0 0 15px rgba(107, 114, 128, 0.5), 0 0 30px rgba(107, 114, 128, 0.25);

  /* ===== THEME ASSETS (2 variables) ===== */
  --sidebar-logo-src: url('/artwork/Dashie_Full_Logo_Black_Transparent.png');
  --sidebar-icon-filter: invert(20%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.3);

}



/* ============================================================================
   HALLOWEEN LIGHT THEME - Festive autumn colors with light backgrounds (Backup)
   ============================================================================ */

body.theme-halloween-light-backup {
  /* ===== BACKGROUNDS (8 variables) ===== */
  --bg-primary: #FFF5E6; /* Warm cream */
  --bg-secondary: #FFE8CC; /* Light peach */
  --bg-tertiary: #FFD4A3; /* Soft orange */
  --bg-modal-backdrop: rgba(107, 31, 160, 0.5); /* Purple-tinted backdrop */
  --bg-button: #FF9800; /* Bright orange button */
  --bg-active: rgba(255, 107, 26, 0.2); /* Orange highlight */
  --bg-primary-semi-transparent: rgba(255, 245, 230, 0.9);
  --bg-selected-fill: rgba(255, 107, 26, 0.2); /* Orange selection */

  /* ===== TEXT (3 variables) ===== */
  --text-primary: #2D1B0E; /* Dark brown */
  --text-secondary: #5D4E3A; /* Medium brown */
  --text-muted: #8D7E6A; /* Light brown */

  /* ===== ACCENTS (5 variables) ===== */
  --accent-primary: #228B22; /* Forest green */
  --accent-secondary: #FF6B1A; /* Bright Halloween orange */
  --accent-selection: #8B7355; /* Bronze/brown */
  --accent-current-time: #FF6B1A; /* Orange current time indicator */
  --grid-gap-color: #FFD4A3; /* Match bg-tertiary */

  /* ===== GLOW EFFECTS (1 variable) ===== */
  --glow-selected: 0 0 15px rgba(255, 107, 26, 0.5), 0 0 30px rgba(255, 107, 26, 0.25); /* Orange glow */

  /* ===== THEME ASSETS (2 variables) ===== */
  --sidebar-logo-src: url('/artwork/Dashie_Full_Logo_Black_Transparent.png');
  --sidebar-icon-filter: invert(20%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.3);

}

/* ============================================================================
   CHRISTMAS DARK THEME - Festive red/green/gold palette with dark background
   ============================================================================ */

body.theme-christmas-dark {
  /* ===== BACKGROUNDS (8 variables) ===== */
  --bg-primary: #0D1B0D; /* Deep forest green, almost black */
  --bg-secondary: #1A0F0F; /* Dark with red tint */
  --bg-tertiary: #2A1F1F; /* Lighter warm brown */
  --bg-modal-backdrop: rgba(13, 27, 13, 0.8); /* Green-tinted backdrop */
  --bg-button: #165B33; /* Deep Christmas green */
  --bg-active: rgba(220, 53, 69, 0.3); /* Red highlight */
  --bg-primary-semi-transparent: rgba(13, 27, 13, 0.9);
  --bg-selected-fill: rgba(220, 53, 69, 0.2); /* Red selection */

  /* ===== TEXT (3 variables) ===== */
  --text-primary: #fff;
  --text-secondary: #ccc;
  --text-muted: #999;

  /* ===== ACCENTS (5 variables) ===== */
  --accent-primary: #DC3545; /* Christmas red */
  --accent-secondary: #FFD700; /* Gold */
  --accent-selection: #C0C0C0; /* Metallic silver */
  --accent-current-time: #DC3545; /* Red current time indicator */
  --grid-gap-color: #0D1B0D; /* Match bg-primary for seamless look */

  /* ===== GLOW EFFECTS (2 variables) ===== */
  --glow-selected: 0 0 20px rgba(220, 53, 69, 0.6), 0 0 45px rgba(220, 53, 69, 0.3); /* Red glow */
  --glow-focused: 0 0 25px rgba(220, 53, 69, 0.9), 0 0 55px rgba(220, 53, 69, 0.5); /* Bright red focused glow */

  /* ===== WIDGET BORDERS (2 variables) ===== */
  --color-active-border: #DC3545; /* Red border for active widgets */
  --widget-border-gradient-active: linear-gradient(to right, #DC3545 0%, rgba(220, 53, 69, 0.3) 50%, #DC3545 100%); /* Red gradient border */

  /* ===== THEME ASSETS (2 variables) ===== */
  --sidebar-logo-src: url('/artwork/Dashie_Full_Logo_White_Transparent.png');
  --sidebar-icon-filter: invert(100%);

}

/* ============================================================================
   CHRISTMAS LIGHT THEME - Festive winter wonderland with light backgrounds
   ============================================================================ */

body.theme-christmas-light {
  /* ===== BACKGROUNDS (8 variables) ===== */
  --bg-primary: #F5FAF7; /* Soft white with darker mint */
  --bg-secondary: #EEF5F1; /* Darker mint/ice */
  --bg-tertiary: #E0EFE8; /* Deeper icy blue-green */
  --bg-modal-backdrop: rgba(22, 91, 51, 0.5); /* Green-tinted backdrop */
  --bg-button: #28A745; /* Bright Christmas green */
  --bg-active: rgba(220, 53, 69, 0.2); /* Red highlight */
  --bg-primary-semi-transparent: rgba(245, 250, 247, 0.9);
  --bg-selected-fill: rgba(220, 53, 69, 0.2); /* Red selection */

  /* ===== TEXT (3 variables) ===== */
  --text-primary: #1A3A1A; /* Dark forest green */
  --text-secondary: #4A6A4A; /* Medium green */
  --text-muted: #7A9A7A; /* Light green */

  /* ===== ACCENTS (5 variables) ===== */
  --accent-primary: #DC3545; /* Christmas red */
  --accent-secondary: #FFD700; /* Gold */
  --accent-selection: #708090; /* Slate gray/silver */
  --accent-current-time: #DC3545; /* Red current time indicator */
  --grid-gap-color: #C8E6D9; /* Soft mint */

  /* ===== GLOW EFFECTS (2 variables) ===== */
  --glow-selected: 0 0 15px rgba(220, 53, 69, 0.5), 0 0 30px rgba(220, 53, 69, 0.25); /* Red glow */
  --glow-focused: 0 0 20px rgba(220, 53, 69, 0.8), 0 0 45px rgba(220, 53, 69, 0.4); /* Bright red focused glow */

  /* ===== WIDGET BORDERS (2 variables) ===== */
  --color-active-border: #DC3545; /* Red border for active widgets */
  --widget-border-gradient-active: linear-gradient(to right, #DC3545 0%, rgba(220, 53, 69, 0.3) 50%, #DC3545 100%); /* Red gradient border */

  /* ===== THEME ASSETS (2 variables) ===== */
  --sidebar-logo-src: url('/artwork/Dashie_Full_Logo_Black_Transparent.png');
  --sidebar-icon-filter: invert(20%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.3);

}

/* ============================================================================
   THEME TRANSITIONS
   ============================================================================ */

/* Smooth transitions when switching themes */
* {
  transition: background-color var(--transition-medium),
              color var(--transition-medium),
              border-color var(--transition-medium),
              box-shadow var(--transition-medium);
}

/* Prevent transition on page load */
body.no-transitions * {
  transition: none !important;
}

/* ============================================================================
   SETTINGS MODAL COLORS - Always use standard light/dark (not themed)
   ============================================================================ */

/* Settings in ALL dark theme variants use the same dark colors */
body.theme-dark,
body.theme-halloween-dark,
body.theme-christmas-dark {
  --settings-bg-container: #2A2A2A;
  --settings-bg-screen: #222;
  --settings-bg-nav: #2A2A2A;
  --settings-bg-cell: #333;
  --settings-bg-input: #2A2A2A;
  --settings-bg-disabled: #1A1A1A;
  --settings-border-color: rgba(255, 255, 255, 0.15);
  --settings-text-label: #fff;
  --settings-text-value: #999;
  --settings-text-header: #888;
  --settings-chevron-color: #555;
  --settings-toggle-bg: #444;
  --settings-toggle-knob: #fff;
  --settings-scrollbar: rgba(255, 255, 255, 0.2);
  --settings-scrollbar-hover: rgba(255, 255, 255, 0.3);
}

/* Settings in ALL light theme variants use the same light colors */
body.theme-light,
body:not([class*="theme-"]),
body.theme-halloween-light,
body.theme-halloween-light-backup,
body.theme-christmas-light {
  --settings-bg-container: #F2F2F7;
  --settings-bg-screen: #F2F2F7;
  --settings-bg-nav: #F5F5F7;
  --settings-bg-cell: #FCFCFF;
  --settings-bg-input: #FFFFFF;
  --settings-bg-disabled: #F2F2F7;
  --settings-border-color: rgba(60, 60, 67, 0.29);
  --settings-text-label: #000000;
  --settings-text-value: #8E8E93;
  --settings-text-header: #6B7280;
  --settings-chevron-color: #8E8E93;
  --settings-toggle-bg: #E5E5EA;
  --settings-toggle-knob: #FFFFFF;
  --settings-scrollbar: rgba(0, 0, 0, 0.2);
  --settings-scrollbar-hover: rgba(0, 0, 0, 0.3);
}

/* ============================================================================
   MODAL COLORS - Always use standard light/dark (not themed)
   ============================================================================ */

/* Modals in ALL dark theme variants use the same dark colors */
body.theme-dark,
body.theme-halloween-dark,
body.theme-christmas-dark {
  --modal-bg: #2a2a2a;
  --modal-title-color: #ffffff;
  --modal-text-color: #b0b0b0;
  --modal-border-color: #404040;
  --modal-button-bg: transparent;
  --modal-button-color: #ffffff;
  --modal-button-hover-bg: #3a3a3a;
}

/* Modals in ALL light theme variants use the same light colors */
body.theme-light,
body:not([class*="theme-"]),
body.theme-halloween-light,
body.theme-halloween-light-backup,
body.theme-christmas-light {
  --modal-bg: #ffffff;
  --modal-title-color: #1a1a1a;
  --modal-text-color: #666666;
  --modal-border-color: #e0e0e0;
  --modal-button-bg: transparent;
  --modal-button-color: #1a1a1a;
  --modal-button-hover-bg: #f5f5f5;
}

/* ============================================================================
   MOBILE COLORS - Always use standard light/dark (not themed)
   ============================================================================
   Mobile dashboard, chores, rewards, profile, GPS, photos pages should use
   these theme-neutral colors instead of the themed --text-* variables.
   ============================================================================ */

/* Mobile in ALL dark theme variants use the same dark colors */
body.theme-dark,
body.theme-halloween-dark,
body.theme-christmas-dark {
  --mobile-bg-primary: #1C1C1E;
  --mobile-bg-secondary: #2C2C2E;
  --mobile-bg-tertiary: #3A3A3C;
  --mobile-bg-hover: #3A3A3C;
  --mobile-bg-active: #48484A;
  --mobile-border-color: rgba(84, 84, 88, 0.6);
  --mobile-text-primary: #FFFFFF;
  --mobile-text-secondary: #AEAEB2;
  --mobile-text-tertiary: #8E8E93;
  --mobile-accent-color: #EE9828; /* Dashie orange */
  --mobile-accent-color-dark: #D4861F;
  --mobile-selection-color: #007AFF; /* iOS blue for selection states */
  --mobile-selection-color-dark: #0056b3;
  --mobile-deselect-color: #8E8E93; /* Gray for deselect states */
  --mobile-deselect-color-dark: #636366;
}

/* Mobile in ALL light theme variants use the same light colors */
body.theme-light,
body:not([class*="theme-"]),
body.theme-halloween-light,
body.theme-halloween-light-backup,
body.theme-christmas-light {
  --mobile-bg-primary: #FCFCFF;
  --mobile-bg-secondary: #FFFFFF;
  --mobile-bg-tertiary: #F5F5F7;
  --mobile-bg-hover: #F5F5F7;
  --mobile-bg-active: #E8E8EA;
  --mobile-border-color: rgba(189, 193, 198, 0.3);
  --mobile-text-primary: #1C1C1E;
  --mobile-text-secondary: #666666;
  --mobile-text-tertiary: #8E8E93;
  --mobile-accent-color: #EE9828; /* Dashie orange */
  --mobile-accent-color-dark: #D4861F;
  --mobile-selection-color: #007AFF; /* iOS blue for selection states */
  --mobile-selection-color-dark: #0056b3;
  --mobile-deselect-color: #8E8E93; /* Gray for deselect states */
  --mobile-deselect-color-dark: #636366;
}