@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

:root{
  --font-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

html,
body{
  min-height: 100%;
}

body{
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection{
  background: color-mix(in srgb, var(--secondary-color) 30%, white);
  color: var(--text-color);
}

.card,
.btn,
.input,
select.input,
textarea.input{
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.btn{
  min-height: 40px;
}

.btn:disabled,
.btn[disabled]{
  opacity: .65;
  cursor: not-allowed;
}

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

.input::placeholder{
  color: color-mix(in srgb, var(--muted-text-color) 78%, transparent);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--secondary-color) 46%, white);
}

@media (max-width: 640px){
  .btn{
    min-height: 42px;
  }
}

html[data-theme="dark"] body{
  background: #0B1220;
  color: #E5E7EB;
}

html[data-theme="dark"] header[data-name="top-nav"]{
  background: rgba(11,18,32,.86);
  border-color: rgba(255,255,255,.10);
}

html[data-theme="dark"] .card{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

html[data-theme="dark"] .btn-ghost{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
  color: #E5E7EB;
}

html[data-theme="dark"] .input{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
  color: #E5E7EB;
}

html[data-theme="dark"] .input::placeholder{
  color: rgba(229, 231, 235, .56);
}

html[data-theme="dark"] .btn-primary{
  box-shadow: 0 8px 20px rgba(59,130,246,.24);
}

html[data-theme="dark"] [data-name="modal-overlay"]{
  background: rgba(2,6,23,.62);
}

html[data-theme="dark"] .muted,
html[data-theme="dark"] .link-muted{
  color: rgba(229, 231, 235, .72);
}

html[data-theme="dark"] .link-muted:hover{
  color: #FFFFFF;
}