/* ============================================================
   Real Flow AI · Typography
   Sans minimalista (Inter) + acento editorial puntual (Playfair
   italic solo en <em>) + mono ámbar para datos.
   No usar italic en titulares enteros — minimalista profesional.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,500&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* --- Font families ------------------------------------------- */
  --font-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-serif:    'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* --- Type scale (modular ratio 1.25) ------------------------- */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   32px;
  --fs-3xl:   42px;
  --fs-4xl:   56px;
  --fs-5xl:   72px;

  /* --- Line heights -------------------------------------------- */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-base:    1.55;
  --lh-relaxed: 1.7;

  /* --- Letter spacing ------------------------------------------ */
  --tracking-tight:  -0.018em;
  --tracking:        0;
  --tracking-wide:   0.04em;
  --tracking-mono:   0.02em;
}

/* --- Resets ---------------------------------------------------- */
html { font-size: 16px; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg-primary);
  font-feature-settings: "kern", "liga", "calt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Titulares: sans minimalista, NO italic ------------------- */
.t-display {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 600;
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

.t-h1 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

.t-h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.012em;
  color: var(--text);
}

.t-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.008em;
  color: var(--text);
}

.t-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--text);
}

/* --- Acento editorial puntual — solo para <em> ---------------- */
.t-em,
h1 em, h2 em, h3 em, h4 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--color-accent);
}

/* --- Cuerpo --------------------------------------------------- */
.t-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--text);
}

.t-body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
}

.t-body-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--text);
}

.t-muted { color: var(--text-muted); }
.t-dim   { color: var(--text-dim); }

/* --- Eyebrow / labels ----------------------------------------- */
.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-info);
}

.t-label {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}

/* --- Mono / métricas / código terminal ------------------------ */
.t-metric {
  font-family: var(--font-mono);
  font-size: var(--fs-3xl);
  font-weight: 700;
  letter-spacing: var(--tracking-mono);
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}

.t-metric-sm {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-mono);
  color: var(--text);
}

.t-mono-amber  { color: var(--amber); }
.t-mono-cyan   { color: var(--cyan); }
.t-mono-green  { color: var(--green-mint); }
.t-mono-coral  { color: var(--coral); }
.t-mono-orange { color: var(--orange); }

/* --- Fg accents inline --------------------------------------- */
.fg-orange   { color: var(--orange); }
.fg-amber    { color: var(--amber); }
.fg-cyan     { color: var(--cyan); }
.fg-green    { color: var(--green-mint); }
.fg-coral    { color: var(--coral); }
.fg-purple   { color: var(--purple); }

/* --- Links default -------------------------------------------- */
a {
  color: var(--color-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
a:hover {
  color: var(--color-link-hover);
  border-bottom-color: currentColor;
}

::selection {
  background: var(--orange);
  color: var(--text);
}