:root {
  --app-bg: #f0efed;
  --app-surface: #ffffff;
  --app-surface-alt: #f5f5f4;
  --app-surface-muted: #fafaf9;
  --app-border: rgba(0, 0, 0, 0.10);
  --app-border-strong: rgba(0, 0, 0, 0.18);
  --app-text: #1c1917;
  --app-text-muted: #57534e;
  --app-text-subtle: #8a857f;
  --app-brand: #1792c8;
  --app-brand-strong: #0f6b92;
  --app-brand-soft: #e8f5fa;
  --app-focus-ring: rgba(23, 146, 200, 0.28);
  --app-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

html[data-theme="dark"],
body[data-theme="dark"] {
  --app-bg: #111110;
  --app-surface: #1c1c1b;
  --app-surface-alt: #252524;
  --app-surface-muted: #2c2c2a;
  --app-border: rgba(255, 255, 255, 0.08);
  --app-border-strong: rgba(255, 255, 255, 0.18);
  --app-text: #f5f5f4;
  --app-text-muted: #b1aea8;
  --app-text-subtle: #78716c;
  --app-brand: #23a5df;
  --app-brand-strong: #67c5e8;
  --app-brand-soft: #17313b;
  --app-focus-ring: rgba(35, 165, 223, 0.34);
}

button,
input,
select,
textarea {
  max-width: 100%;
  min-width: 0;
  font-family: inherit;
}

button {
  overflow-wrap: anywhere;
}

select {
  text-overflow: ellipsis;
}

fieldset,
legend {
  min-width: 0;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--app-brand);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--app-focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}