/* ==========================================================================
   Feminive · Design Tokens
   Colors and type for the feminive.com.br fanfics site.
   Source of truth: feminive-design audit + src/styles/main.css
   ========================================================================== */

/* Google Fonts — pull both weights/styles used by the system. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Source+Sans+3:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---------- Hue + base palette (oklch, single-hue derived) ---------- */
  --hue: 14;                                    /* rosa-malva */

  --primary:        oklch(0.70 0.06 var(--hue));        /* rosa principal */
  --primary-strong: oklch(0.60 0.10 var(--hue));        /* rosa profundo / brown */
  --golden:         oklch(0.85 0.12 var(--hue));        /* dourado de destaque */
  --deep:           oklch(0.25 0.02 var(--hue));        /* tinta editorial */
  --deep-text:      oklch(0.25 0.02 var(--hue));        /* alias for body code */

  /* ---------- Surfaces ---------- */
  --page:    oklch(0.975 0.008 var(--hue));             /* fundo principal (creme rosado) */
  --paper:   oklch(0.985 0.008 40);                     /* fundo de leitura (creme quente) */
  --card:    #ffffff;                                   /* cartões */
  --soft:    oklch(0.95 0.018 var(--hue));              /* superfície soft (chips, hover) */
  --line:    oklch(0.90 0.01 var(--hue));               /* divisores, bordas */

  /* ---------- Tinta ---------- */
  --ink-90: oklch(0.22 0.015 var(--hue));               /* corpo forte */
  --ink-70: oklch(0.42 0.018 var(--hue));               /* corpo padrão */
  --ink-50: oklch(0.58 0.012 var(--hue));               /* meta, captions */
  --ink-30: oklch(0.75 0.008 var(--hue));               /* desabilitado, hairlines */

  /* ---------- Semantic accents ---------- */
  --accent-ok:   oklch(0.70 0.12 155);                  /* sucesso */
  --accent-warn: oklch(0.70 0.14 55);                   /* aviso */
  --accent-bad:  oklch(0.64 0.18 25);                   /* erro */

  /* ---------- Selection / underlines ---------- */
  --selection-bg: oklch(0.93 0.03 var(--hue));
  --link-underline: var(--primary);
  --link-hover: var(--primary-strong);
  --link-active: var(--deep);

  /* ---------- Type families ---------- */
  --font-serif: "Fraunces", "Fraunces Variable", "Playfair Display", Georgia, serif;
  --font-sans:  "Source Sans 3", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Type scale (semantic) ---------- */
  --fs-display: clamp(42px, 6vw, 64px);
  --fs-h1:      clamp(36px, 5vw, 52px);
  --fs-h2:      clamp(28px, 3.2vw, 40px);
  --fs-h3:      22px;
  --fs-h4:      17px;
  --fs-body:    16px;
  --fs-body-lg: 18px;        /* fluido de leitura — Fraunces 400 */
  --fs-meta:    12px;
  --fs-eyebrow: 11px;
  --fs-caption: 13px;

  --lh-display: 1.02;
  --lh-tight:   1.12;
  --lh-snug:    1.2;
  --lh-body:    1.6;
  --lh-read:    1.7;          /* corpo de capítulo */

  --tracking-display: -0.03em;
  --tracking-tight:   -0.025em;
  --tracking-snug:    -0.015em;
  --tracking-eyebrow: 0.18em;
  --tracking-meta:    0.08em;

  /* ---------- Spacing / radii / shadow ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 22px;
  --space-6: 28px;
  --space-7: 40px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-pill:  999px;
  --radius-card:  16px;
  --radius-soft:  10px;
  --radius-sharp: 2px;        /* botões / strips editoriais */
  --radius-image: 4px;        /* capas de livro */

  --shadow-cover: 0 1px 0 var(--line);
  --shadow-card:  0 10px 30px oklch(0.70 0.06 var(--hue) / 0.15);
  --shadow-pop:   0 6px 14px oklch(0.80 0.05 var(--hue) / 0.35);
}

/* ==========================================================================
   Semantic type styles — use these classes (or @apply equivalents).
   Mirrors how the audit + main.css apply Fraunces to titles/reading and
   Source Sans 3 to body/UI.
   ========================================================================== */

html, body { font-family: var(--font-sans); color: var(--ink-90); line-height: var(--lh-body); }

.h-display, h1.display {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--deep);
}
.h-display em, .h1 em { font-style: italic; color: var(--primary-strong); font-weight: 500; }

h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--deep);
  margin: 0;
}
h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--deep);
  margin: 0 0 8px;
}
h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--deep);
  margin: 0;
}
h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h4);
  letter-spacing: 0;
  color: var(--deep);
  margin: 0;
}

p { margin: 0 0 12px; color: var(--ink-70); font-size: var(--fs-body); }

/* Reading body — long-form chapter type. */
.prose, .post-content {
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-read);
  color: var(--ink-90);
}
.prose p, .post-content p { font-family: var(--font-serif); }
.prose p em, .post-content p em { color: var(--primary-strong); font-style: italic; }

/* Drop cap — first para of chapter. */
.prose > p:first-of-type::first-letter,
.post-content > p:first-of-type::first-letter {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 3.5em;
  line-height: 0.85;
  float: left;
  padding: 6px 10px 0 0;
  color: var(--primary-strong);
}

/* Italic dek / subtitle in Fraunces italic (used heavily in audit). */
.dek {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.45;
  color: var(--ink-70);
}

/* Eyebrow — short-caps preceded by a 24px hairline (signature pattern). */
.eyebrow {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 13px;
  color: var(--primary-strong);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  flex: 0 0 24px;
  height: 1px;
  background: var(--primary-strong);
}

/* Kicker — uppercase pill kicker (for admin/meta surfaces). */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--primary-strong);
  background: oklch(0.96 0.022 var(--hue));
  border: 1px solid oklch(0.88 0.04 var(--hue));
  padding: 6px 12px;
  border-radius: var(--radius-pill);
}

/* Italic numeral — numbered series, e.g. "no 01 · em andamento". */
.num-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--primary-strong);
}

/* Meta caps — uppercase metadata under a card. */
.meta-caps {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-50);
  font-weight: 500;
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.86em;
}

::selection { background-color: var(--selection-bg); }