@import "tailwindcss";

@theme {
  --color-canvas: #f3f6f5;
  --color-surface: #ffffff;
  --color-line: #d8e0de;
  --color-ink: #17211f;
  --color-muted: #64716e;
  --color-brand: #1f775e;
  --color-brand-strong: #155a46;
  --color-brand-soft: #e7f3ef;
  --color-cyan-soft: #e5f5f7;
  --color-cyan-strong: #147386;
  --color-amber-soft: #fff3d8;
  --color-amber-strong: #9b6507;
  --color-coral-soft: #ffebe5;
  --color-coral-strong: #b9492f;
  --font-sans:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC",
    sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

@layer base {
  * {
    box-sizing: border-box;
    letter-spacing: 0;
  }

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

  body {
    @apply bg-canvas font-sans text-ink antialiased;
  }

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

  button,
  a {
    -webkit-tap-highlight-color: transparent;
  }

  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    @apply outline-2 outline-offset-2 outline-brand;
  }

  .frame-root,
  .frame-document {
    @apply overflow-x-hidden bg-canvas;
  }
}

@keyframes loading-progress-swing {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(178%);
  }
}