/* ─── Design tokens ───────────────────────────────────────────────── */

:root {
  color-scheme: light;

  --c-bg: #f3f6fb;
  --c-surface: #ffffff;
  --c-surface-2: #f7f9fd;
  --c-line: #e3e9f3;
  --c-line-strong: #d3dbeb;

  --c-ink: #1b2230;
  --c-ink-2: #4d5872;
  --c-ink-3: #8b97ab;

  --c-accent: #ff8a00;
  --c-accent-strong: #f07f00;
  --c-accent-soft: #fff4e8;
  --c-accent-ink: #a35a00;

  --c-green: #1f9d61;
  --c-red: #d0453b;

  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(20, 28, 45, 0.05);
  --shadow-md: 0 6px 20px rgba(20, 28, 45, 0.08);
  --shadow-lg: 0 24px 60px rgba(20, 28, 45, 0.22);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ─── Base ────────────────────────────────────────────────────────── */

* {
  box-sizing: border-box;
}

html,
body,
#app {
  height: 100%;
  margin: 0;
}

body {
  font-family: 'Inter', 'Segoe UI Variable Text', 'Segoe UI', Roboto, system-ui, -apple-system,
    'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button {
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease),
    color 0.15s var(--ease), box-shadow 0.15s var(--ease), transform 0.12s var(--ease);
}

button:active:not(:disabled) {
  transform: translateY(1px);
}

input,
select {
  accent-color: var(--c-accent);
}

:focus-visible {
  outline: 2px solid rgba(255, 138, 0, 0.55);
  outline-offset: 2px;
}

/* ─── Scrollbars ──────────────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: #cfd7e6;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: #b4bfd2;
  background-clip: padding-box;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #cfd7e6 transparent;
}

::selection {
  background: rgba(255, 138, 0, 0.25);
}

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