/* Claude-inspired Typography - FONTS ONLY, NO LAYOUT CHANGES */

/* Step 1: Better font stack (similar to Claude) */
body,
input,
textarea,
button,
select {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif !important;
}

/* Step 2: Monospace font for code */
code,
pre,
kbd,
samp {
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace !important;
}

/* Step 3: Smooth font rendering */
body {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Step 4: Claude-like font size and line height */
body {
  font-size: 16px !important;
  line-height: 1.625 !important;
}

/* Step 5: Claude-like text colors */
/* Light mode - softer black for less eye strain */
body {
  color: #2c2c2c !important;
}

/* Dark mode - comfortable light gray */
@media (prefers-color-scheme: dark) {
  body {
    color: #ebebeb !important;
  }
}

/* Slightly muted secondary text */
.secondary-text,
small,
.text-muted {
  color: #666666 !important;
}

@media (prefers-color-scheme: dark) {
  .secondary-text,
  small,
  .text-muted {
    color: #a0a0a0 !important;
  }
}

/* That's it - just fonts, colors, and readability. No layout changes. */