/* css/theme.css */

/* ------------------------- */
/*  1. Light Mode Variables  */
/* ------------------------- */
:root {
  --background-primary: #ffffff; /* White */
  --background-secondary: #f8f9fa; /* Off-white */
  --text-primary: #212529; /* Dark Gray */
  --text-secondary: #6c757d; /* Medium Gray */
  --accent-primary: #007bff; /* Blue */
  --accent-hover: #0056b3; /* Darker Blue */
  --border-color: #dee2e6; /* Light Gray */
  --card-background: #ffffff;
  --card-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  --link-color: #007bff;
  --link-hover-color: #0056b3;
}

/* ------------------------ */
/*  2. Dark Mode Variables  */
/* ------------------------ */
html[data-theme='dark'] {
  --background-primary: #121212; /* Almost Black */
  --background-secondary: #1e1e1e; /* Dark Gray */
  --text-primary: #e0e0e0; /* Light Gray */
  --text-secondary: #a0a0a0; /* Medium Gray */
  --accent-primary: #0d6efd; /* Brighter Blue */
  --accent-hover: #3d8bfd; /* Lighter Blue */
  --border-color: #343a40; /* Dark Gray */
  --card-background: #1e1e1e;
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  --link-color: #3d8bfd;
  --link-hover-color: #6caeff;
}

/* --------------------------- */
/*  3. Auto-detection (Media Query)  */
/* --------------------------- */
/* Automatically set dark mode if the user's OS is in dark mode */
/* This runs if no preference is saved in localStorage */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --background-primary: #121212;
    --background-secondary: #1e1e1e;
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0a0;
    --accent-primary: #0d6efd;
    --accent-hover: #3d8bfd;
    --border-color: #343a40;
    --card-background: #1e1e1e;
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    --link-color: #3d8bfd;
    --link-hover-color: #6caeff;
  }
}

/* ------------------------- */
/*  4. General Styles       */
/* ------------------------- */
body {
  background-color: var(--background-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Update other elements to use the new variables */
/* Example for a generic container */
.container {
    background-color: var(--background-secondary);
    border: 1px solid var(--border-color);
}

a {
    color: var(--link-color);
}

a:hover {
    color: var(--link-hover-color);
}

/* -------------------------------- */
/*  5. Theme Switcher Button Styles */
/* -------------------------------- */
/* Theme switcher in header */
.theme-switcher {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--background-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 18px;
    margin-left: 12px; /* Space from previous element */
    flex-shrink: 0; /* Prevent from shrinking */
}

.theme-switcher:hover {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
    transform: scale(1.05);
}

.theme-switcher:focus {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.theme-switcher .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Show appropriate icon based on current theme (to indicate next state) */
/* When in dark mode, show sun icon to indicate switching to light mode */
/* When in light mode, show moon icon to indicate switching to dark mode */
html[data-theme='dark'] .theme-switcher .sun-icon {
    display: flex;
}
html[data-theme='dark'] .theme-switcher .moon-icon {
    display: none;
}

html:not([data-theme='dark']) .theme-switcher .sun-icon {
    display: none;
}
html:not([data-theme='dark']) .theme-switcher .moon-icon {
    display: flex;
}

/* Floating button fallback for pages that don't have it in header */
body:not(.header-theme-switcher) .theme-switcher.floating {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}