@import "tailwindcss";
@import "@fontsource-variable/instrument-sans";

@theme {
  --font-sans: "Instrument Sans Variable", ui-sans-serif, system-ui, sans-serif;

  --color-ink: #0f2a2b;
  --color-ink-2: #1b3d3e;
  --color-ink-muted: #8fb0aa;
  --color-teal: #0e6b5c;
  --color-teal-dark: #0a5247;
  --color-teal-soft: #e3f1ed;
  --color-mint: #2fbf8f;
  --color-paper: #f4f7f6;
  --color-line: #dce4e1;
  --color-text: #17302f;
  --color-muted: #5d7270;
  --color-brick: #b93c2b;
  --color-brick-soft: #fbeae7;
  --color-amber: #9a6512;
  --color-amber-soft: #fbf1df;
}

html {
  background: var(--color-paper);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
}

.tabular {
  font-variant-numeric: tabular-nums;
}

:focus-visible {
  outline: 2px solid var(--color-mint);
  outline-offset: 2px;
}

dialog::backdrop {
  background: rgb(15 42 43 / 0.45);
}

@media (prefers-reduced-motion: no-preference) {
  .drawer-in {
    animation: drawer-in 180ms ease-out;
  }
  .toast-in {
    animation: toast-in 160ms ease-out;
  }
}

@keyframes drawer-in {
  from {
    transform: translateX(24px);
    opacity: 0;
  }
}
@keyframes toast-in {
  from {
    transform: translateY(8px);
    opacity: 0;
  }
}