@import "tailwindcss";
@import "./tokens.css";

/* Typography: Inter + system fallbacks */
@theme {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Typography scale per docs/ui.md */
  --text-sm: 0.8125rem;       /* 13px */
  --text-sm--line-height: 1.4;
  --text-base: 0.9375rem;     /* 15px */
  --text-base--line-height: 1.5;
  --text-lg: 1.0625rem;       /* 17px */
  --text-lg--line-height: 1.4;

  /* Radius per docs/ui.md */
  --radius-sm: 3px;
  --radius-md: 6px;
}

/* Base styles */
@layer base {
  body {
    font-family: var(--font-sans);
    color: var(--color-foreground);
    background-color: var(--color-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Mobile: ensure inputs are 16px+ to prevent iOS zoom */
  @media (max-width: 1023px) {
    input, select, textarea {
      font-size: 16px;
    }
  }
}