/* core/themes.css */
/* Theme-specific styles and overrides */

/* ========================================
   LIGHT THEME (DEFAULT)
   ======================================== */

[data-theme="light"] {
  color-scheme: light;
}

/* Light theme is default, defined in navigation-tokens.css */

/* ========================================
   DARK THEME
   ======================================== */

[data-theme="dark"] {
  color-scheme: dark;
}

/* Dark theme tokens are defined in navigation-tokens.css */
/* Additional dark theme specific styles */

[data-theme="dark"] body {
  background: var(--ds-color-background);
}

[data-theme="dark"] ::selection {
  background: rgba(96, 165, 250, 0.3);
  color: white;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-color: transparent;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Dark theme form elements */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--ds-color-surface);
  color: var(--ds-color-text);
  border-color: var(--ds-color-border);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--ds-color-text-weaker);
}

/* Dark theme code blocks */
[data-theme="dark"] code {
  background: rgba(255, 255, 255, 0.05);
  color: #60a5fa;
}

[data-theme="dark"] pre {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--ds-color-border);
}

/* ========================================
   AUTO THEME (SYSTEM PREFERENCE)
   ======================================== */

[data-theme="auto"] {
  color-scheme: light dark;
}

/* Auto theme adapts based on system preference */
/* See media queries in navigation-tokens.css */

/* ========================================
   HIGH CONTRAST MODE
   ======================================== */

@media (prefers-contrast: high) {
  :root {
    --ds-focus-ring-width: 3px;
    --ds-focus-ring-offset: 2px;
  }
  
  .c-sidebar__link,
  .c-topbar__button,
  .c-button {
    border-width: 2px;
  }
  
  .c-sidebar__link--active {
    outline: 2px solid var(--ds-color-accent);
    outline-offset: -2px;
  }
  
  [data-theme="dark"] {
    --ds-color-text: white;
    --ds-color-background: black;
    --ds-color-surface: #111;
    --ds-color-border: #666;
  }
}

/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .c-sidebar,
  .c-sidebar-internal,
  .c-sidebar-right,
  .c-settings {
    transition: none !important;
  }
}

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

/* Smooth theme switching */
html[data-transitioning="true"] * {
  transition: background-color var(--ds-duration-normal) var(--ds-ease-out),
              color var(--ds-duration-normal) var(--ds-ease-out),
              border-color var(--ds-duration-normal) var(--ds-ease-out) !important;
}

/* ========================================
   THEME-SPECIFIC COMPONENTS
   ======================================== */

/* Sidebar in dark theme */
[data-theme="dark"] .c-sidebar {
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
}

/* Cards in dark theme */
[data-theme="dark"] .c-card {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Buttons in dark theme */
[data-theme="dark"] .c-button {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .c-button:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Dropdowns in dark theme */
[data-theme="dark"] .c-topbar__dropdown-menu {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Modals in dark theme */
[data-theme="dark"] .c-settings {
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

/* ========================================
   ACCENT COLOR VARIANTS
   ======================================== */

/* Blue accent (default) */
[data-accent="blue"] {
  --ds-color-accent: rgb(13, 86, 150);
  --ds-color-accent-hover: rgb(43, 71, 161);
  --ds-color-accent-active: rgb(33, 54, 124);
}

/* Green accent */
[data-accent="green"] {
  --ds-color-accent: rgb(34, 197, 94);
  --ds-color-accent-hover: rgb(22, 163, 74);
  --ds-color-accent-active: rgb(21, 128, 61);
}

/* Purple accent */
[data-accent="purple"] {
  --ds-color-accent: rgb(147, 51, 234);
  --ds-color-accent-hover: rgb(126, 34, 206);
  --ds-color-accent-active: rgb(107, 33, 168);
}

/* Orange accent */
[data-accent="orange"] {
  --ds-color-accent: rgb(251, 146, 60);
  --ds-color-accent-hover: rgb(249, 115, 22);
  --ds-color-accent-active: rgb(234, 88, 12);
}

/* Red accent */
[data-accent="red"] {
  --ds-color-accent: rgb(239, 68, 68);
  --ds-color-accent-hover: rgb(220, 38, 38);
  --ds-color-accent-active: rgb(185, 28, 28);
}

/* ========================================
   THEME UTILITIES
   ======================================== */

/* Force light theme locally */
.theme-light {
  --ds-color-text: rgb(12, 26, 61);
  --ds-color-background: rgb(250, 251, 251);
  --ds-color-surface: rgb(255, 255, 255);
  --ds-color-border: rgb(216, 222, 228);
}

/* Force dark theme locally */
.theme-dark {
  --ds-color-text: rgb(226, 232, 240);
  --ds-color-background: rgb(15, 23, 42);
  --ds-color-surface: rgb(30, 41, 59);
  --ds-color-border: rgb(51, 65, 85);
}

/* ========================================
   FOCUS VISIBLE ENHANCEMENT
   ======================================== */

/* Enhanced focus for dark theme */
[data-theme="dark"] :focus-visible {
  outline-color: var(--ds-color-accent);
  outline-offset: 3px;
}

/* Enhanced focus for buttons */
[data-theme="dark"] .c-button:focus-visible {
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.5);
}

/* ========================================
   LOADING STATES
   ======================================== */

/* Skeleton loading for light theme */
[data-theme="light"] .skeleton {
  background: linear-gradient(
    90deg,
    var(--ds-color-surface-raised) 0%,
    var(--ds-color-surface-hover) 50%,
    var(--ds-color-surface-raised) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

/* Skeleton loading for dark theme */
[data-theme="dark"] .skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.05) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ========================================
   THEME-AWARE SHADOWS
   ======================================== */

[data-theme="light"] {
  --adaptive-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --adaptive-shadow-s: 0 1px 3px rgba(0, 0, 0, 0.09);
  --adaptive-shadow-m: 0 4px 12px rgba(0, 0, 0, 0.15);
  --adaptive-shadow-l: 0 8px 24px rgba(0, 0, 0, 0.15);
  --adaptive-shadow-xl: 0 24px 38px rgba(0, 0, 0, 0.16);
}

[data-theme="dark"] {
  --adaptive-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
  --adaptive-shadow-s: 0 1px 3px rgba(0, 0, 0, 0.35);
  --adaptive-shadow-m: 0 4px 12px rgba(0, 0, 0, 0.45);
  --adaptive-shadow-l: 0 8px 24px rgba(0, 0, 0, 0.55);
  --adaptive-shadow-xl: 0 24px 38px rgba(0, 0, 0, 0.65);
}

/* ========================================
   PRINT THEME
   ======================================== */

@media print {
  :root {
    --ds-color-text: black;
    --ds-color-background: white;
    --ds-color-surface: white;
    --ds-color-border: #ddd;
    --ds-color-accent: black;
  }
  
  * {
    color: black !important;
    background: white !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  a {
    color: black !important;
    text-decoration: underline !important;
  }
}