/* Shared dark-mode toggle switch + dark palette overrides.
   Loaded on every page, after each page's own stylesheet(s), so these
   rules win the cascade without needing !important. */

html.dark {
  color-scheme: dark;
}

/* Monochrome tech logos that need a different variant per theme (e.g.
   Payload's black/white wordmark) toggle visibility off the html.dark class
   rather than Tailwind's dark: variant, matching every other rule here. */
.tech-logo-dark {
  display: none;
}
html.dark .tech-logo-light {
  display: none;
}
html.dark .tech-logo-dark {
  display: inline-block;
}

/* Tech-stack chip icons (project detail pages) that ship as a single-color
   black/near-black SVG with no theme-aware asset of their own (some are
   fetched straight from a CDN). Inverting them in dark mode turns black
   into white instead of letting them vanish against the dark chip
   background. */
html.dark .tech-icon-mono {
  filter: invert(1);
}

/* --- Toggle switch (small, no icons) --- */
.theme-toggle {
  --track-w: 30px;
  --track-h: 16px;
  --thumb: 12px;
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: var(--track-w);
  height: var(--track-h);
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #e4e4e7;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.theme-toggle:focus-visible {
  outline: 2px solid #71717a;
  outline-offset: 2px;
}
.theme-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: var(--thumb);
  height: var(--thumb);
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}
.theme-toggle[aria-pressed="true"] {
  background: #52525b;
}
.theme-toggle[aria-pressed="true"] .theme-toggle-thumb {
  transform: translateX(calc(var(--track-w) - var(--track-h)));
  background: #18181b;
}

/* Layout helper used on resource pages to place the toggle next to the
   existing "back" link at the top of the page. */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Experience entries: the bullet lists get long, so on mobile each entry
   collapses to just its header (logo, title, dates, duration) behind an
   accordion. Desktop keeps everything expanded, as before. */
.exp-chevron {
  transition: transform 0.2s ease;
}
.exp-toggle[aria-expanded="true"] .exp-chevron {
  transform: rotate(180deg);
}
@media (max-width: 639px) {
  .exp-body {
    display: none;
  }
  .exp-body.is-open {
    display: block;
  }
}

/* =======================================================================
   Tailwind-driven pages (index.html, projects.html, projects/*.html)
   These pages use arbitrary-value utility classes (e.g. text-[#71717A])
   instead of a themeable token, so dark mode is applied by overriding the
   compiled utility selectors directly rather than editing every element.
   ======================================================================= */

html.dark body,
html.dark .bg-\[\#FAFAF9\] {
  background-color: #0C0C0F;
}
html.dark .bg-white {
  background-color: #18181b;
}
html.dark .bg-\[\#F4F4F5\] {
  background-color: #27272a;
}
/* hairline separators (section rules, experience timeline, deploy pipeline) */
html.dark .bg-\[\#E4E4E7\] {
  background-color: #27272a;
}
html.dark .hover\:bg-\[\#F4F4F5\]:hover {
  background-color: #27272a;
}

html.dark .border-\[\#E4E4E7\] {
  border-color: #27272a;
}
/* border-[#18181B] paired with bg-[#18181B] is a filled badge/dot — leave
   it alone. Only the outline-only usage needs a lighter border. */
html.dark .border-\[\#18181B\]:not(.bg-\[\#18181B\]) {
  border-color: #3f3f46;
}
html.dark .hover\:border-\[\#18181B\]:hover {
  border-color: #fafaf9;
}
html.dark .focus\:border-\[\#18181B\]:focus {
  border-color: #fafaf9;
}

html.dark .text-\[\#18181B\] {
  color: #fafaf9;
}
html.dark .hover\:text-\[\#18181B\]:hover {
  color: #fafaf9;
}
html.dark .group:hover .group-hover\:text-\[\#18181B\] {
  color: #fafaf9;
}
html.dark .text-\[\#3f3f46\] {
  color: #d4d4d8;
}
html.dark .text-\[\#52525B\] {
  color: #a1a1aa;
}
html.dark .text-\[\#71717A\] {
  color: #71717a;
}
html.dark .text-\[\#A1A1AA\] {
  color: #52525b;
}
html.dark .text-\[\#D4D4D8\] {
  color: #3f3f46;
}
html.dark .decoration-\[\#D4D4D8\] {
  text-decoration-color: #3f3f46;
}
html.dark .placeholder-\[\#A1A1AA\]::placeholder {
  color: #52525b;
}

html.dark .ring-\[\#18181B\] {
  --tw-ring-color: #3f3f46;
}
html.dark .focus-visible\:ring-\[\#18181B\]:focus-visible {
  --tw-ring-color: #fafaf9;
}
html.dark .ring-\[\#E4E4E7\] {
  --tw-ring-color: #27272a;
}
html.dark .ring-offset-\[\#FAFAF9\] {
  --tw-ring-offset-color: #0C0C0F;
}

/* =======================================================================
   Resource pages (resources/**) — plain CSS with hardcoded hex colors,
   shared across resources/{style,dsa/style,practice/style,
   ai-learning/style,dictionary/style}.css. Selectors below are grouped by
   dark-mode target color; a selector that doesn't exist on a given page
   is simply ignored by the browser.
   ======================================================================= */

html.dark body,
html.dark .search-wrap {
  background: #0C0C0F;
}
html.dark .search-input {
  background: #18181b;
}
html.dark .toc-item:active,
html.dark .toc-item:hover,
html.dark .res-item:active,
html.dark .res-item:hover,
html.dark .cat-pill:active,
html.dark .example-row,
html.dark .term-example code,
html.dark .term-definition code {
  background: #27272a;
}
html.dark li::before {
  background: #71717a;
}

html.dark h2,
html.dark .complexity-row,
html.dark .footer-nav,
html.dark .toc-list,
html.dark .toc-item,
html.dark .res-list,
html.dark .res-item,
html.dark .term-entry,
html.dark .search-input,
html.dark .cat-pill {
  border-color: #27272a;
}
html.dark .difficulty {
  border-color: #3f3f46;
  color: #a1a1aa;
}
html.dark .search-input:focus {
  border-color: #71717a;
}

html.dark .lede {
  color: #d4d4d8;
}
html.dark p,
html.dark li,
html.dark .term-definition,
html.dark .example-row {
  color: #e4e4e7;
}
html.dark .complexity-desc,
html.dark .res-oneliner,
html.dark .cat-pill {
  color: #a1a1aa;
}
html.dark body,
html.dark .back:hover,
html.dark .complexity-label,
html.dark .toc-title,
html.dark .res-title,
html.dark .search-input,
html.dark .term-example code,
html.dark .term-definition code {
  color: #fafaf9;
}
html.dark .back,
html.dark .eyebrow,
html.dark .toc-category,
html.dark .toc-oneliner,
html.dark .dict-category,
html.dark .term-example {
  color: #71717a;
}
html.dark .index-count,
html.dark .res-count,
html.dark .no-results,
html.dark .search-input::placeholder {
  color: #52525b;
}

/* Difficulty badges: swap pastel-on-light for saturated-on-dark */
html.dark .difficulty-easy {
  color: #4ade80;
  border-color: #166534;
  background: #052e16;
}
html.dark .difficulty-medium {
  color: #fbbf24;
  border-color: #92400e;
  background: #451a03;
}
html.dark .difficulty-hard {
  color: #f87171;
  border-color: #991b1b;
  background: #450a0a;
}