/* Dark Mode Styles */
:root {
  /* Light mode colors (default) */
  --color-scheme: light;
  
  /* Background colors */
  --bg-primary: var(--cosmic-latte);
  --bg-secondary: var(--antiflash-white);
  --bg-code: var(--antiflash-white);
  
  /* Text colors */
  --text-primary: var(--bistre);
  --text-heading: var(--barn-red);
  --text-heading-secondary: var(--copper);
  --text-link: var(--copper);
  --text-code: var(--specsavers-green);
  
  /* Border colors */
  --border-primary: var(--bistre);
  --border-secondary: var(--copper);
  
  /* Hover states */
  --hover-bg: #fff2a8;
  --hover-text: var(--bistre);
}

[data-theme="dark"] {
  --color-scheme: dark;
  
  /* Dark mode background colors */
  --bg-primary: #1a1611;
  --bg-secondary: #2b2118;
  --bg-code: #1e1a16;
  
  /* Dark mode text colors */
  --text-primary: #e8dcc8;
  --text-heading: #ff9b85;
  --text-heading-secondary: #d4a574;
  --text-link: #d4a574;
  --text-code: #7ed99f;
  
  /* Dark mode border colors */
  --border-primary: #4a3f2f;
  --border-secondary: #a8763e;
  
  /* Dark mode hover states */
  --hover-bg: rgba(212, 165, 116, 0.2);
  --hover-text: #f7f3e3;
}

[data-theme="lights-out"] {
  --color-scheme: dark;
  
  /* Pure black for OLED */
  --bg-primary: #000000;
  --bg-secondary: #000000;  /* Pure black for tables/sections */
  --bg-code: #1e1a16;  /* Use dark mode's code background */
  
  /* Balanced for readability and eye comfort */
  --text-primary: #b3b3b3;  /* ~7:1 contrast ratio for WCAG AAA */
  --text-heading: #805555;  /* Slightly brighter muted red */
  --text-heading-secondary: #7a6a5a;  /* Subtle copper-gray for hierarchy */
  --text-link: #8a8a8a;  /* Slightly brighter links */
  --text-code: #7ed99f;  /* Use dark mode's code text color */
  
  /* Subtle borders */
  --border-primary: #1a1a1a;
  --border-secondary: #333333;
  
  /* Very subtle hover states */
  --hover-bg: rgba(60, 60, 60, 0.3);
  --hover-text: #cccccc;
}

/* Apply color scheme to root */
:root {
  color-scheme: var(--color-scheme);
}

/* Update base styles to use CSS variables */
html {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  /* Removed transitions for instant switching */
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* Headers */
h1 {
  color: var(--text-heading);
}

h2 {
  color: var(--text-heading-secondary);
}

h3 {
  color: var(--text-primary);
}

/* Links */
a {
  color: var(--text-link);
}

a:hover, a:focus {
  background-color: var(--hover-bg);
  color: var(--hover-text);
}

/* Borders */
header {
  border-bottom-color: var(--border-primary);
}

footer {
  border-top-color: var(--border-primary);
}

/* Code blocks */
code, pre {
  background-color: var(--bg-code);
  color: var(--text-code);
}

/* Lights-out mode uses dark mode style for code blocks - no special styling needed */

/* Tables */
tbody tr:nth-child(odd) {
  background-color: var(--bg-secondary);
}

tbody tr:hover {
  background-color: var(--hover-bg);
}

/* Pure black tables in lights-out */
[data-theme="lights-out"] tbody tr:nth-child(odd) {
  background-color: #000000;
}

[data-theme="lights-out"] tbody tr:hover {
  background-color: #0a0a0a;
}

[data-theme="lights-out"] thead {
  color: #808080;  /* Brighter header text for readability */
  border-bottom-color: #333333;
}

/* Blockquotes */
blockquote {
  border-left-color: var(--border-secondary);
  border-bottom-color: var(--border-secondary);
}

/* Extra subtle blockquotes in lights-out */
[data-theme="lights-out"] blockquote {
  color: #909090;  /* Slightly brighter for readability */
  border-left-color: #2a2a2a;
  border-bottom-color: #2a2a2a;
}

/* Dark mode toggle button */
.theme-toggle {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--text-heading-secondary), var(--text-heading));
  color: var(--bg-primary);
  border: 2px solid var(--border-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
  opacity: 0.8;
}

.theme-toggle:hover {
  transform: scale(1.1) rotate(15deg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25), 0 3px 6px rgba(0, 0, 0, 0.15);
  opacity: 1;  /* Full opacity on hover for better interaction feedback */
}

/* Pure black button in lights-out mode */
[data-theme="lights-out"] .theme-toggle {
  background: #000000;
  border: 2px solid #333333;
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.05);
}

[data-theme="lights-out"] .theme-toggle:hover {
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.08);
}

.theme-toggle:active {
  transform: scale(0.95);
}

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

.theme-toggle::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 30%, rgba(255, 255, 255, 0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.theme-toggle:hover::before {
  opacity: 1;
}

/* Icon transitions - instant opacity, keep rotation */
.theme-toggle .icon-sun,
.theme-toggle .icon-moon,
.theme-toggle .icon-lights-out {
  position: absolute;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              scale 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* No opacity transition for instant switching */
}

/* Light mode */
[data-theme="light"] .theme-toggle .icon-sun {
  opacity: 1;
  transform: rotate(0deg);
  scale: 1;
}

[data-theme="light"] .theme-toggle .icon-moon,
[data-theme="light"] .theme-toggle .icon-lights-out {
  opacity: 0;
  transform: rotate(180deg);
  scale: 0.8;
}

/* Dark mode */
[data-theme="dark"] .theme-toggle .icon-moon {
  opacity: 1;
  transform: rotate(0deg);
  scale: 1;
}

[data-theme="dark"] .theme-toggle .icon-sun,
[data-theme="dark"] .theme-toggle .icon-lights-out {
  opacity: 0;
  transform: rotate(-180deg);
  scale: 0.8;
}

/* Lights out mode */
[data-theme="lights-out"] .theme-toggle .icon-lights-out {
  opacity: 1;
  transform: rotate(0deg);
  scale: 1;
}

[data-theme="lights-out"] .theme-toggle .icon-sun,
[data-theme="lights-out"] .theme-toggle .icon-moon {
  opacity: 0;
  transform: rotate(180deg);
  scale: 0.8;
}

/* Add pulse animation on theme change */
@keyframes pulse {
  0% { scale: 1; }
  50% { scale: 1.2; }
  100% { scale: 1; }
}

.theme-toggle.switching .icon-sun,
.theme-toggle.switching .icon-moon {
  animation: pulse 0.4s ease;
}

/* Syntax highlighting adjustments for dark mode */
[data-theme="dark"] .highlight {
  filter: invert(1) hue-rotate(180deg);
}

[data-theme="dark"] .highlight img {
  filter: invert(1) hue-rotate(180deg);
}

/* Lights-out uses same highlight approach as dark mode */
[data-theme="lights-out"] .highlight {
  filter: invert(1) hue-rotate(180deg);
}

[data-theme="lights-out"] .highlight img {
  filter: invert(1) hue-rotate(180deg);
}

/* Image adjustments for dark mode */
[data-theme="dark"] img {
  opacity: 0.85;
  filter: brightness(0.9) contrast(1.1);
}

[data-theme="dark"] img:hover {
  opacity: 1;
  filter: brightness(1) contrast(1);
}

/* Image adjustments for lights out mode - more aggressive dimming */
[data-theme="lights-out"] img {
  opacity: 0.75;
  filter: brightness(0.8) contrast(1.2);
}

[data-theme="lights-out"] img:hover {
  opacity: 0.9;
  filter: brightness(0.9) contrast(1.1);
}

/* Exempt emojis and icons from image filters */
[data-theme="dark"] img[alt*="emoji"],
[data-theme="dark"] img[alt*="icon"],
[data-theme="dark"] img.no-filter,
[data-theme="lights-out"] img[alt*="emoji"],
[data-theme="lights-out"] img[alt*="icon"],
[data-theme="lights-out"] img.no-filter {
  filter: none;
  opacity: 1;
}

/* No transitions for instant theme switching */
/* Only keep transitions for hover effects and animations */
/* (Removed - transition is now defined in main .theme-toggle rule) */

a {
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

/* Enhanced focus indicators */
*:focus-visible {
  outline: 2px solid var(--text-link);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Skip to content link for accessibility */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--text-heading-secondary);
  color: var(--bg-primary);
  padding: 0.5rem 1rem;
  text-decoration: none;
  border-radius: 0 0 0.5rem 0;
  z-index: 1002;
}

.skip-to-content:focus {
  top: 0;
}

/* Theme transition toast */
.theme-toast {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  background: var(--text-heading-secondary);
  color: var(--bg-primary);
  padding: 0.75rem 1.5rem;
  border-radius: 2rem;
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
  pointer-events: none;
  z-index: 1001;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.theme-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Special styling for lights out mode toast */
[data-theme="lights-out"] .theme-toast {
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

/* Fade out when scrolling down */
.theme-toggle.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* Mobile adjustments */
@media screen and (max-width: 991px) {
  .theme-toggle {
    bottom: 1.5rem;
    right: 1.5rem;
    /* Use viewport width for responsive sizing on mobile */
    width: calc(12vw + 2rem);  /* Minimum 2rem, scales with viewport */
    height: calc(12vw + 2rem);
    max-width: 5rem;  /* Cap at 5rem for tablets */
    max-height: 5rem;
    font-size: calc(6vw + 1rem);
    max-font-size: 2.5rem;
  }
}

/* Extra small mobile devices */
@media screen and (max-width: 480px) {
  .theme-toggle {
    width: calc(15vw + 2rem);  /* Even larger on very small screens */
    height: calc(15vw + 2rem);
    font-size: calc(7.5vw + 1rem);
  }
  
  .theme-toast {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .theme-toggle:hover {
    transform: scale(1.1);
  }
  
  .theme-toast {
    transition: none;
  }
}

/* Respect system preference - only apply dark mode, not lights-out */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="lights-out"]) {
    --color-scheme: dark;
    --bg-primary: #1a1611;
    --bg-secondary: #2b2118;
    --bg-code: #1e1a16;
    --text-primary: #e8dcc8;
    --text-heading: #ff9b85;
    --text-heading-secondary: #d4a574;
    --text-link: #d4a574;
    --text-code: #7ed99f;
    --border-primary: #4a3f2f;
    --border-secondary: #a8763e;
    --hover-bg: rgba(212, 165, 116, 0.2);
    --hover-text: #f7f3e3;
  }
  
  :root:not([data-theme="light"]):not([data-theme="lights-out"]) .theme-toggle .icon-sun {
    opacity: 0;
    transform: rotate(-180deg);
  }
  
  :root:not([data-theme="light"]):not([data-theme="lights-out"]) .theme-toggle .icon-moon {
    opacity: 1;
    transform: rotate(0deg);
  }
}