/* Theme System for denis256.dev */
/* Dark/Light mode with CSS variables */

/* Dark Theme (Default) */
:root {
  /* Backgrounds */
  --bg-primary: #0b090a;
  --bg-secondary: rgba(49, 50, 57, 0.3);
  --bg-secondary-hover: rgba(49, 50, 57, 0.6);
  --bg-tertiary: #161a1d;

  /* Text colors */
  --text-primary: #adb5bd;
  --text-secondary: #6c757d;
  --text-tertiary: #d3d3d3;
  --text-white: #fff;

  /* Accent colors */
  --accent-primary: #e5383b;
  --accent-dark: #9d0208;
  --accent-hover: #fff;

  /* Link colors */
  --link-primary: #b1a7a6;
  --link-orange: #f48c06;
  --link-orange-hover: #ffba08;

  /* Border colors */
  --border-primary: #e5383b;
  --border-secondary: rgba(229, 56, 59, 0.2);
  --border-dotted: #333;
  --border-tag: rgba(49, 50, 57, 0.6);

  /* Code block */
  --code-bg: #0b090a;

  /* Tag colors */
  --tag-bg: rgba(49, 50, 57, 0.3);
  --tag-border: rgba(49, 50, 57, 0.6);
}

/* Light Theme */
[data-theme="light"] {
  /* Backgrounds */
  --bg-primary: #f8f9fa;
  --bg-secondary: rgba(220, 225, 230, 0.5);
  --bg-secondary-hover: rgba(220, 225, 230, 0.8);
  --bg-tertiary: #e9ecef;

  /* Text colors */
  --text-primary: #212529;
  --text-secondary: #495057;
  --text-tertiary: #6c757d;
  --text-white: #000;

  /* Accent colors */
  --accent-primary: #dc3545;
  --accent-dark: #c82333;
  --accent-hover: #fff;

  /* Link colors */
  --link-primary: #495057;
  --link-orange: #e85d04;
  --link-orange-hover: #dc2f02;

  /* Border colors */
  --border-primary: #dc3545;
  --border-secondary: rgba(220, 53, 69, 0.3);
  --border-dotted: #dee2e6;
  --border-tag: rgba(220, 225, 230, 0.8);

  /* Code block */
  --code-bg: #f8f9fa;

  /* Tag colors */
  --tag-bg: rgba(220, 225, 230, 0.5);
  --tag-border: rgba(220, 225, 230, 0.9);
}

/* Theme Toggle Button */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 36px;
    height: 36px;
    margin: 0 10px;
    padding: 8px;
    background: transparent;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    background-color: var(--accent-primary);
    color: var(--text-white);
    border-color: var(--accent-primary);
}

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

.theme-icon {
    width: 20px;
    height: 20px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.theme-icon-sun {
    opacity: 1;
    transform: rotate(0deg);
}

.theme-icon-moon {
    opacity: 0;
    position: absolute;
    transform: rotate(180deg);
}

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

[data-theme="light"] .theme-icon-moon {
    opacity: 1;
    position: relative;
    transform: rotate(0deg);
}

/* Smooth color transitions for theme switching */
html,
body,
.header-bar,
.navigation,
.navigation > a,
.theme-toggle,
.search-container,
.pagefind-ui__search-input,
.pagefind-ui__results-area,
.pagefind-ui__result,
.cookie-container,
article,
footer,
small > a,
.logo h1 a,
.less,
.em {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}