/**
 * Theme Variables — Miller Digital Construction
 * Shared across all pages. Load before main.css, projects.css, project-detail.css.
 */

/* Brand colors — never change between themes */
:root {
  --color-brand-dark-green: #004830;
  --color-brand-light-green: #BAEB98;
  --color-brand-dark-accent: #570101;
}

/* Dark theme (default) */
:root,
[data-theme="dark"] {
  --color-bg: #1b1f22;
  --color-bg-alt: #000000;
  --color-bg-overlay: rgba(19, 21, 25, 0.5);
  --color-fg: #ffffff;
  --color-fg-bold: #ffffff;
  --color-fg-light: rgba(255, 255, 255, 0.5);
  --color-border: #ffffff;
  --color-border-bg: rgba(255, 255, 255, 0.075);
  --color-border-bg-alt: rgba(255, 255, 255, 0.175);
  --color-link: var(--color-brand-light-green);
  --color-link-hover: #ffffff;
  --color-link-border: rgba(186, 235, 152, 0.5);
  --gradient-bg: linear-gradient(160deg, var(--color-brand-dark-green) 0%, var(--color-bg) 30%, var(--color-bg) 60%, var(--color-brand-dark-accent) 100%);
  --gradient-overlay: linear-gradient(to bottom, rgba(0, 72, 48, 0.4), rgba(87, 1, 1, 0.3));
  --gradient-header: radial-gradient(rgba(0, 72, 48, 0.2) 0%, transparent 55%);
  --color-bg-article: rgba(27, 31, 34, 0.85);
  --color-accent-border: rgba(186, 235, 152, 0.4);
  --color-accent-box-bg: rgba(186, 235, 152, 0.08);
  --color-accent-box-border: rgba(186, 235, 152, 0.25);
  --color-card-border: rgba(255, 255, 255, 0.1);
  --color-card-overlay: rgba(0, 0, 0, 0.3);
  --color-fg-muted: rgba(255, 255, 255, 0.7);
  --color-fg-muted-alt: rgba(255, 255, 255, 0.6);
  --color-bg-muted: rgba(255, 255, 255, 0.05);
  --color-input-bg: transparent;
  --color-border-muted: rgba(255, 255, 255, 0.1);
  --color-border-muted-alt: rgba(255, 255, 255, 0.15);
}

/* Light theme — brand colors recontextualized as accents */
[data-theme="light"] {
  --color-bg: #fcfcfc;
  --color-bg-alt: #ffffff;
  --color-bg-overlay: rgba(252, 252, 252, 0.95);
  --color-fg: #1b1f22;
  --color-fg-bold: #1b1f22;
  --color-fg-light: rgba(27, 31, 34, 0.6);
  --color-border: #1b1f22;
  --color-border-bg: rgba(27, 31, 34, 0.08);
  --color-border-bg-alt: rgba(27, 31, 34, 0.15);
  --color-link: var(--color-brand-dark-green);
  --color-link-hover: var(--color-brand-dark-accent);
  --color-link-border: rgba(0, 72, 48, 0.5);
  --gradient-bg: linear-gradient(160deg, rgba(0, 72, 48, 0.15) 0%, var(--color-bg) 30%, var(--color-bg) 60%, rgba(87, 1, 1, 0.12) 100%);
  --gradient-overlay: linear-gradient(to bottom, rgba(0, 72, 48, 0.2), rgba(87, 1, 1, 0.15));
  --gradient-header: radial-gradient(rgba(0, 72, 48, 0.15) 0%, transparent 55%);
  --color-bg-article: rgba(252, 252, 252, 0.95);
  --color-input-bg: rgba(0, 0, 0, 0.08);
  --color-accent-border: rgba(0, 72, 48, 0.4);
  --color-accent-box-bg: rgba(0, 72, 48, 0.08);
  --color-accent-box-border: rgba(0, 72, 48, 0.25);
  --color-card-border: rgba(27, 31, 34, 0.12);
  --color-card-overlay: rgba(0, 0, 0, 0.08);
  --color-fg-muted: rgba(27, 31, 34, 0.8);
  --color-fg-muted-alt: rgba(27, 31, 34, 0.65);
  --color-bg-muted: rgba(27, 31, 34, 0.05);
  --color-border-muted: rgba(27, 31, 34, 0.12);
  --color-border-muted-alt: rgba(27, 31, 34, 0.2);
}

/* Theme Toggle — slider style */
.theme-toggle-slider {
  position: relative;
  display: inline-block;
  width: 2.75rem;
  height: 1.4rem;
  cursor: pointer;
  flex-shrink: 0;
}
.theme-toggle-slider .theme-toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
}
.theme-toggle-slider .slider-track {
  position: absolute;
  inset: 0;
  background: var(--color-border-bg);
  border: 1px solid var(--color-border);
  border-radius: 1.4rem;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.theme-toggle-slider .slider-track::before {
  content: '';
  position: absolute;
  height: 1rem;
  width: 1rem;
  left: 0.2rem;
  bottom: 0.15rem;
  background: var(--color-border);
  border-radius: 50%;
  transition: transform 0.2s ease, background 0.2s ease;
}
.theme-toggle-slider .theme-toggle-input:checked + .slider-track::before {
  transform: translateX(1.35rem);
}
.theme-toggle-slider:hover .slider-track {
  background: var(--color-border-bg-alt);
}
.theme-toggle-slider .theme-toggle-input:focus-visible + .slider-track {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}
.theme-toggle-slider .theme-toggle-input:focus-visible {
  outline: none;
}

/* Index header: position toggle in top-right */
#header {
  position: relative;
}
#header .theme-toggle-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  margin-top: 0 !important;
}
#header .theme-toggle-wrapper:before {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}