:root {
  color-scheme: light;
  --app-body-background: radial-gradient(circle at top, rgba(255, 255, 255, 0.96) 0%, rgba(250, 247, 241, 0.9) 42%, rgba(244, 247, 250, 0.92) 100%);
  --app-body-text: #1f2d3f;
  --app-surface: rgba(255, 255, 255, 0.92);
  --app-surface-strong: #ffffff;
  --app-surface-soft: #f8fafc;
  --app-surface-inverse: #1f2d3f;
  --app-border: rgba(226, 232, 240, 0.9);
  --app-border-soft: rgba(255, 255, 255, 0.7);
  --app-muted-text: #64748b;
  --app-heading-text: #1f2d3f;
  --app-link: #e29a2d;
  --app-control-bg: rgba(255, 255, 255, 0.92);
  --app-control-text: #334155;
  --app-control-border: #e2e8f0;
  --app-shadow: 0 20px 40px rgba(20, 32, 45, 0.08);
  --app-range-thumb-background: #0f172a;
  --app-range-thumb-shadow: 0 8px 18px rgba(15, 23, 42, 0.22);
  --app-image-filter: none;
  --app-gradient-from: #f1f5f9;
  --app-gradient-to: #e2e8f0;
  --app-ring: #e2e8f0;
}

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);
}