/* base styles split from app/static/styles.css. */

:root {
  --sidebar-width: 208px;
  --template-sidebar-width: 312px;
  --bg: #fcfbfa;
  --sidebar: #fcfbfa;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-soft: #efede9;
  --surface-subtle: #fbfaf9;
  --text: #27272a;
  --muted: #71717a;
  --line: #e7e5e4;
  --line-strong: #d6d3d1;
  --primary: #2563eb;
  --primary-strong: #1d4ed8;
  --danger: #b42318;
  --danger-bg: #fff0ed;
  --shadow: 0 16px 38px rgba(24, 24, 27, 0.07);
  --shadow-soft: 0 8px 22px rgba(24, 24, 27, 0.045);
  --shadow-card: 0 0 72px rgba(24, 24, 27, 0.028), 0 0 144px rgba(24, 24, 27, 0.01);
  --shadow-media: 0 16px 42px rgba(24, 24, 27, 0.035), 0 3px 12px rgba(24, 24, 27, 0.018);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

img {
  max-width: 100%;
  display: block;
}

@media (max-width: 900px) {
  body {
      overflow: auto;
    }
}

@media (max-width: 1280px) and (min-width: 901px) {
  :root {
      --template-sidebar-width: 288px;
    }
}

@media (prefers-reduced-motion: reduce) {
  html {
      scroll-behavior: auto;
    }
}