:root {
  color-scheme: light;
  font-family: Inter, "Segoe UI", "Microsoft YaHei UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --canvas: #f4f5fa;
  --surface: #ffffff;
  --surface-glass: rgba(255, 255, 255, 0.78);
  --surface-soft: #f8f8fc;
  --surface-hover: #f0efff;
  --ink: #232535;
  --ink-soft: #56596c;
  --muted: #8a8da0;
  --line: #e8e9f0;
  --line-strong: #dcdfea;
  --purple: #6d62e9;
  --purple-deep: #5549ca;
  --purple-soft: #eeecff;
  --blue: #4f84e8;
  --blue-soft: #eaf2ff;
  --teal: #38a9a2;
  --teal-soft: #e6f7f4;
  --amber: #c98631;
  --amber-soft: #fff3df;
  --red: #ca5267;
  --red-soft: #fff0f2;
  --shadow-soft: 0 12px 34px rgba(38, 42, 72, 0.07);
  --shadow-pop: 0 16px 38px rgba(39, 43, 76, 0.13);
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --sidebar-width: 252px;
  --sidebar-compact-width: 76px;
  --topbar-height: 66px;
  --motion-fast: 140ms;
  --motion-base: 220ms;
  --ease-out: cubic-bezier(0.2, 0.75, 0.25, 1);
}

* { box-sizing: border-box; }

html { min-width: 320px; min-height: 100%; background: var(--canvas); }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-size: 14px;
}

button, input, textarea, select { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid rgba(79, 132, 232, 0.52);
  outline-offset: 2px;
}

::selection { color: #302875; background: #ddd9ff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}