/* ============================================================
   Japan Rabbit — base element styles
   Mirrors the app's @layer base (tailwind.css)
   ============================================================ */

html {
  font-family: var(--font-sans);
  line-height: var(--leading-normal);
  color: var(--gray-900);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  background: var(--surface-app);
  color: var(--text-strong);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p { margin-bottom: 1rem; }

a {
  color: var(--text-link);
  text-decoration: underline;
  transition: color var(--dur-base) var(--ease-in-out);
}
a:hover { color: var(--red-600); }
a:focus-visible {
  outline: 2px solid var(--red-500);
  outline-offset: 2px;
}

img { max-width: 100%; height: auto; }

::selection { background-color: var(--red-100); }

blockquote {
  margin: 0 1.5rem;
  padding: 0.5rem 1rem;
  border-left: 4px solid var(--gray-200);
  background: var(--gray-100);
}

code {
  font-family: var(--font-mono);
  background: var(--gray-100);
  padding: 0.2rem 0.4rem;
  border-radius: var(--radius-sm);
  font-size: 0.9em;
}

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