:root {
  --black:     #0d0d0d;
  --white:     #f5f4f0;
  --mid:       #7a7a72;
  --rule:      #2a2a26;
  --accent:    #e8410a;
  --accent2:   #f5a623;
  --success:   #35c46d;
  --card-bg:   #161612;
  --pill-bg:   #222218;
  --panel-bg:  #111110;
  --shadow:    0 18px 40px rgba(0, 0, 0, 0.28);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --black:     #f5f4f0;
  --white:     #16160f;
  --mid:       #78766c;
  --rule:      #ddd8cc;
  --accent:    #d63c0a;
  --accent2:   #b8790a;
  --success:   #1f9d58;
  --card-bg:   #ffffff;
  --pill-bg:   #ece8dc;
  --panel-bg:  #eeece2;
  --shadow:    0 18px 40px rgba(66, 56, 48, 0.14);
  color-scheme: light;
}

html {
  color-scheme: dark;
  transition: background-color 0.2s ease, color 0.2s ease;
}

body {
  background: var(--black);
  color: var(--white);
  min-height: 100vh;
  transition: background-color 0.2s ease, color 0.2s ease;
}

a {
  color: inherit;
}

button,
input,
select,
.event-card,
.site-header,
.controls,
.quick-filters,
.filter-bar,
.data-note,
.status-bar,
.empty-alternatives,
.empty-state,
.pill,
.quick-pill,
.theme-toggle,
.toggle-control__track {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease, stroke 0.2s ease;
}

button,
input,
select {
  font: inherit;
}