:root {
  color-scheme: dark;
  --app-body-background: radial-gradient(circle at 15% 20%, rgba(200, 154, 61, 0.08), transparent 34%), linear-gradient(180deg, #121212, #1B1B1B);
  --app-body-text: #F5F5F5;
  --app-surface: #202020;
  --app-surface-strong: #1B1B1B;
  --app-surface-soft: #202020;
  --app-surface-inverse: #121212;
  --app-border: #4A4036;
  --app-border-soft: #353535;
  --app-muted-text: #B8B8B8;
  --app-heading-text: #F5F5F5;
  --app-link: #C89A3D;
  --app-control-bg: #1A1A1A;
  --app-control-text: #F5F5F5;
  --app-control-border: #4A4036;
  --app-shadow: 0 12px 40px rgba(0,0,0,.45);
  --app-range-thumb-background: #C89A3D;
  --app-range-thumb-shadow: 0 8px 18px rgba(200, 154, 61, 0.2);
  --app-image-filter: none;
  --app-gradient-from: #1E1E1E;
  --app-gradient-to: #181818;
  --app-ring: rgba(200, 154, 61, 0.26);
}

body {
  background: var(--app-body-background);
  color: var(--app-body-text);
}

input,
textarea,
select {
  background-color: var(--app-control-bg);
  border-color: var(--app-control-border);
  color: var(--app-control-text);
}

img,
video,
canvas {
  filter: var(--app-image-filter);
}

.theme-surface {
  background: var(--app-surface);
  border-color: var(--app-border);
  box-shadow: var(--app-shadow);
}

.theme-surface-muted {
  background: var(--app-surface-soft);
}

.theme-text-primary {
  color: var(--app-heading-text);
}

.theme-text-secondary {
  color: var(--app-muted-text);
}

.theme-border {
  border-color: var(--app-border);
}

.range-thumb::-webkit-slider-thumb {
  background: var(--app-range-thumb-background);
  box-shadow: var(--app-range-thumb-shadow);
}

.range-thumb::-moz-range-thumb {
  background: var(--app-range-thumb-background);
  box-shadow: var(--app-range-thumb-shadow);
}