:root {
  color-scheme: dark;
  --page-bg: #020617;
  --page-text: #f8fafc;
  --text-strong: #fff;
  --text-muted: #94a3b8;
  --text-subtle: #64748b;
  --brand-accent: #22d3ee;
  --background-overlay: linear-gradient(180deg, rgb(2 6 23 / 86%), rgb(2 6 23 / 94%));
  --header-bg: rgb(15 23 42 / 80%);
  --header-border: rgb(30 41 59 / 80%);
  --control-hover: #334155;
  --search-bg: rgb(15 23 42 / 90%);
  --search-border: rgb(51 65 85 / 80%);
  --search-text: #f1f5f9;
  --search-placeholder: #64748b;
  --focus-ring: rgb(6 182 212 / 35%);
  --filter-bg: #0f172a;
  --filter-border: #1e293b;
  --filter-text: #cbd5e1;
  --filter-active-bg: #06b6d4;
  --filter-active-text: #020617;
  --status-accent: #22d3ee;
  --empty-icon-bg: #1e293b;
  --footer-bg: rgb(15 23 42 / 50%);
  --footer-border: rgb(30 41 59 / 80%);
  --card-bg: #0f172a;
  --card-border: rgb(30 41 59 / 90%);
  --card-muted: #94a3b8;
  --card-button-bg: #1e293b;
  --card-button-hover: #334155;
  --card-button-border: #334155;
  --card-button-text: #e2e8f0;
  --card-contact-bg: rgb(30 41 59 / 50%);
  --card-divider: #1e293b;
  --card-chevron: #64748b;
  --facebook-color: #60a5fa;
  --instagram-color: #f472b6;
  --tone-emerald: #34d399;
  --tone-cyan: #22d3ee;
  --tone-rose: #fb7185;
  --tone-purple: #c084fc;
  --tone-amber: #fbbf24;
}

html[data-theme='light'] {
  color-scheme: light;
  --page-bg: #f3f7fc;
  --page-text: #0f172a;
  --text-strong: #0f172a;
  --text-muted: #475569;
  --text-subtle: #64748b;
  --brand-accent: #0e7490;
  --background-overlay: linear-gradient(180deg, rgb(248 250 252 / 84%), rgb(241 245 249 / 93%));
  --header-bg: rgb(255 255 255 / 84%);
  --header-border: rgb(148 163 184 / 38%);
  --control-hover: #e2e8f0;
  --search-bg: rgb(255 255 255 / 92%);
  --search-border: #cbd5e1;
  --search-text: #0f172a;
  --search-placeholder: #64748b;
  --focus-ring: rgb(8 145 178 / 25%);
  --filter-bg: #fff;
  --filter-border: #cbd5e1;
  --filter-text: #334155;
  --filter-active-bg: #0891b2;
  --filter-active-text: #fff;
  --status-accent: #0e7490;
  --empty-icon-bg: #e2e8f0;
  --footer-bg: rgb(255 255 255 / 75%);
  --footer-border: rgb(148 163 184 / 38%);
  --card-bg: rgb(255 255 255 / 92%);
  --card-border: #cbd5e1;
  --card-muted: #475569;
  --card-button-bg: #f1f5f9;
  --card-button-hover: #e2e8f0;
  --card-button-border: #cbd5e1;
  --card-button-text: #334155;
  --card-contact-bg: #f1f5f9;
  --card-divider: #cbd5e1;
  --card-chevron: #64748b;
  --facebook-color: #1d4ed8;
  --instagram-color: #be185d;
  --tone-emerald: #047857;
  --tone-cyan: #0e7490;
  --tone-rose: #be123c;
  --tone-purple: #7e22ce;
  --tone-amber: #a16207;
}

html {
  background: var(--page-bg);
}

body {
  color: var(--page-text);
  font-family: Inter, sans-serif;
  background-image: var(--background-overlay), url('./img/background.jpeg');
  background-position: center, center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

h1,
h2,
.brand-name,
.footer-credit__mark {
  font-family: 'Wix Madefor Display', Inter, sans-serif;
}

.site-header {
  border-bottom: 1px solid var(--header-border);
  background: var(--header-bg);
}

.brand-accent {
  color: var(--brand-accent);
}

.brand-subtitle,
.hero-description,
.results-summary,
.empty-state-description {
  color: var(--text-muted);
}

.theme-toggle {
  display: inline-flex;
  width: 68px;
  height: 38px;
  flex: none;
  align-items: center;
  padding: 4px;
  border: 1px solid #475569;
  border-radius: 999px;
  background: linear-gradient(120deg, #0b1225, #1e293b);
  box-shadow: inset 0 2px 5px rgb(0 0 0 / 22%);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.theme-toggle:hover {
  border-color: #67e8f9;
  box-shadow: 0 0 14px rgb(34 211 238 / 18%), inset 0 2px 5px rgb(0 0 0 / 22%);
}

.theme-toggle__thumb {
  display: grid;
  width: 28px;
  height: 28px;
  flex: none;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #334155, #1e293b);
  box-shadow: 0 2px 6px rgb(0 0 0 / 35%);
  color: #c4b5fd;
  font-size: 14px;
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.theme-toggle__sun {
  display: none;
}

html[data-theme='light'] .theme-toggle {
  border-color: #cbd5e1;
  background: linear-gradient(120deg, #bfdbfe, #fde68a);
  box-shadow: inset 0 1px 4px rgb(15 23 42 / 12%);
}

html[data-theme='light'] .theme-toggle:hover {
  border-color: #0891b2;
  box-shadow: 0 0 14px rgb(245 158 11 / 20%), inset 0 1px 4px rgb(15 23 42 / 12%);
}

html[data-theme='light'] .theme-toggle__thumb {
  transform: translateX(30px);
  background: #fff;
  box-shadow: 0 2px 6px rgb(15 23 42 / 20%);
  color: #d97706;
}

html[data-theme='light'] .theme-toggle__moon {
  display: none;
}

html[data-theme='light'] .theme-toggle__sun {
  display: inline-block;
}

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

.hero-title,
.empty-state-title,
.results-count {
  color: var(--text-strong);
}

.gradient-text {
  display: inline-block;
  padding: 0.12em 0.1em 0;
  line-height: 1.15;
  background: linear-gradient(135deg, #38bdf8 0%, #818cf8 50%, #f43f5e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html[data-theme='light'] .gradient-text {
  background-image: linear-gradient(135deg, #0284c7 0%, #4f46e5 50%, #be185d 100%);
}

.brand-logo {
  width: 44px;
  height: 44px;
  flex: none;
  object-fit: contain;
  filter:
    drop-shadow(0 0 3px rgb(34 211 238 / 75%))
    drop-shadow(0 0 9px rgb(6 182 212 / 40%));
}

.search-icon,
.search-clear {
  color: var(--text-subtle);
}

.search-clear:hover {
  color: var(--text-strong);
}

.search-input {
  border: 1px solid var(--search-border);
  background: var(--search-bg);
  color: var(--search-text);
}

.search-input::placeholder {
  color: var(--search-placeholder);
}

.search-input:focus {
  border-color: var(--status-accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.filter-btn {
  padding: 8px 16px;
  border: 1px solid var(--filter-border);
  border-radius: 12px;
  background: var(--filter-bg);
  color: var(--filter-text);
  font-weight: 500;
  transition: background-color 0.2s, color 0.2s;
}

.filter-btn[aria-pressed='false']:hover {
  background: var(--control-hover);
  color: var(--text-strong);
}

.filter-btn[aria-pressed='true'] {
  border-color: var(--filter-active-bg);
  background: var(--filter-active-bg);
  color: var(--filter-active-text);
  font-weight: 600;
  box-shadow: 0 10px 15px -3px rgb(6 182 212 / 25%);
}

.filter-btn:focus-visible {
  outline: 2px solid var(--status-accent);
  outline-offset: 2px;
}

.active-filter-label {
  color: var(--status-accent);
}

.noscript-copy {
  color: var(--text-muted);
}

.empty-state-icon {
  background: var(--empty-icon-bg);
  color: var(--text-subtle);
}

.site-footer {
  border-top: 1px solid var(--footer-border);
  background: var(--footer-bg);
  color: var(--text-subtle);
}

.footer-secondary,
.footer-credit {
  color: var(--text-subtle);
}

.footer-credit:hover {
  color: var(--text-strong);
}

.footer-credit:focus-visible {
  outline: 2px solid var(--status-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .filter-btn,
  .theme-toggle,
  .theme-toggle__thumb {
    transition: none;
  }
}

@media (max-width: 767px) {
  body {
    background-attachment: scroll;
  }
}