/* ============================================================
   Novels AI — na-fonts.css
   Google Fonts imports & typography system
   ============================================================ */

/* ── Google Fonts Import ────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ── Font smoothing ─────────────────────────────────────── */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Fluid type scale ───────────────────────────────────── */
:root {
  --na-fs-2xs: clamp(.65rem, .9vw, .72rem);
  --na-fs-xs:  clamp(.75rem, 1vw,  .82rem);
  --na-fs-sm:  clamp(.825rem, 1.2vw, .9rem);
  --na-fs-base:clamp(.9rem,  1.4vw, 1rem);
  --na-fs-md:  clamp(1rem,   1.6vw, 1.1rem);
  --na-fs-lg:  clamp(1.1rem, 2vw,   1.25rem);
  --na-fs-xl:  clamp(1.25rem, 2.5vw, 1.5rem);
  --na-fs-2xl: clamp(1.5rem,  3vw,   2rem);
  --na-fs-3xl: clamp(2rem,    4vw,   2.75rem);
  --na-fs-4xl: clamp(2.5rem,  5vw,   3.75rem);
  --na-fs-5xl: clamp(3rem,    6vw,   5rem);
}

/* ── Font stacks (fallbacks) ────────────────────────────── */
.na-font-display { font-family: 'Syne', 'Georgia', serif; }
.na-font-body    { font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif; }
.na-font-mono    { font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; }

/* ── Italic & weight helpers ────────────────────────────── */
.na-italic      { font-style: italic; }
.na-weight-300  { font-weight: 300; }
.na-weight-400  { font-weight: 400; }
.na-weight-500  { font-weight: 500; }
.na-weight-600  { font-weight: 600; }
.na-weight-700  { font-weight: 700; }
.na-weight-800  { font-weight: 800; }

/* ── Letter-spacing helpers ─────────────────────────────── */
.na-tracking-tight  { letter-spacing: -.03em; }
.na-tracking-normal { letter-spacing: 0; }
.na-tracking-wide   { letter-spacing: .05em; }
.na-tracking-wider  { letter-spacing: .08em; }
.na-tracking-widest { letter-spacing: .12em; }

/* ── Line-height helpers ────────────────────────────────── */
.na-leading-tight  { line-height: 1.1; }
.na-leading-snug   { line-height: 1.3; }
.na-leading-normal { line-height: 1.5; }
.na-leading-relaxed{ line-height: 1.7; }
.na-leading-loose  { line-height: 1.9; }

/* ── Monospace code inline ──────────────────────────────── */
code, kbd, samp {
  font-family: var(--na-font-mono);
  font-size: .88em;
  background: rgba(124,58,237,.1);
  border: 1px solid rgba(124,58,237,.2);
  border-radius: 4px;
  padding: 2px 6px;
  color: var(--na-violet-soft);
}

/* ── Rich text body copy helpers ───────────────────────── */
.na-prose p + p { margin-top: 1.2em; }
.na-prose strong { color: var(--na-white); font-weight: 700; }
.na-prose em     { color: var(--na-violet-soft); font-style: italic; }
.na-prose a {
  color: var(--na-cyan-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s ease;
}
.na-prose a:hover { color: var(--na-violet-soft); }

/* ── Highlight / mark ───────────────────────────────────── */
mark {
  background: rgba(124,58,237,.25);
  color: var(--na-violet-soft);
  border-radius: 3px;
  padding: 1px 4px;
}