/* Shared font system. Loaded after the theme so typography is consistent on every page. */
:root {
  --font-heading: "Fredoka", "Trebuchet MS", "Arial Rounded MT Bold", Arial, sans-serif;
  --font-body: "Nunito", Arial, Helvetica, sans-serif;
  --font-game: "Lilita One", "Arial Rounded MT Bold", Arial, sans-serif;
}

body, body.classic-home {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.7;
}

body h1, body h2, body h3,
body .brand, body.classic-home .brand,
body .nav a, body.classic-home .nav a,
body button, body .btn, body .chip,
body .slot strong, body.classic-home .slot strong,
body .table-item, body .item-choice b,
body .rarity, body .trend, body .trend-tag,
body .feature b, body .link-card, body .faq-list summary,
body th, body .village-sign {
  font-family: var(--font-heading);
}

body h1, body h2, body .brand, body.classic-home .brand {
  font-weight: 700;
}

body h1, body h2 { letter-spacing: -.025em; }
body h3 { font-weight: 600; letter-spacing: -.015em; }

body .nav a, body.classic-home .nav a,
body button, body .btn, body .chip,
body .slot strong, body.classic-home .slot strong,
body .table-item, body .item-choice b,
body .rarity, body .trend, body .trend-tag,
body .feature b, body .link-card, body .faq-list summary,
body th, body .village-sign,
body .calculator h2, body .offer h3,
body.classic-home .offer h3, body.classic-home .theirs .offer h3 {
  font-weight: 600;
}

body .modal-head h2 { font-family: var(--font-heading); font-weight: 700; }
body .eyebrow { font-family: var(--font-heading); font-weight: 500; }

body .hero h1, body.classic-home .hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.025em;
}
body.classic-home .hero h1 span { font-size: 1em; }

body p { font-weight: 400; }
body .hero p, body.classic-home .hero p { font-size: 14px; font-weight: 500; line-height: 1.6; }
body .article p, body .article li {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
}
body .article h1 { font-size: clamp(1.85rem, 4vw, 2.5rem); line-height: 1.15; }
body .article h2 { line-height: 1.2; }

body input, body select, body textarea {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
}
body .filters select { font-family: var(--font-body); font-size: 14px; font-weight: 600; }
body .field-label, body .filters label, body .contact-form label,
body .breadcrumb, body .pet-meta, body time, body .brand small {
  font-family: var(--font-body);
  font-weight: 600;
}
body .breadcrumb, body .pet-meta, body .field-label, body .filters label,
body .footer-grid a, body .section-head > a { font-size: 14px; }

body .small, body small, body .data-note,
body .section-head p, body .feature small, body .footer-bottom,
body.classic-home .saved-dot, body.classic-home .data-note,
body.classic-home .feature small, body.classic-home .result p {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
}
body .brand small, body.classic-home .brand small { font-size: 11px; font-weight: 600; }
body .offer-heading small, body.classic-home .offer-heading small { font-size: 11px; font-weight: 600; }

body .nav a, body.classic-home .nav a,
body .btn, body .chip, body .feature b,
body.classic-home .actions .btn, body.classic-home .example-button,
body.classic-home .feature b, body .pet-card .btn {
  font-size: 14px;
  line-height: 1.35;
}
body .btn, body .chip, body .nav a { letter-spacing: 0; }
body .offer h3, body.classic-home .offer h3 { font-size: 17px; line-height: 1.2; }
body .slot strong, body.classic-home .slot strong { font-size: 14px; line-height: 1.2; }
body .slot .edit, body.classic-home .slot .edit {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}
body .empty-slot b, body.classic-home .empty-slot b,
body.classic-home .empty-slot.add b, body.classic-home .empty-slot.ghost b {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

body table { font-family: var(--font-body); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
body th { font-size: 14px; font-weight: 600; }
body .directory-table td:nth-child(3), body .directory-table td:nth-child(4),
body .directory-table td:nth-child(5), body .directory-table td:nth-child(6),
body .table-wrap table:not(.directory-table) td {
  font-family: var(--font-body);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
body .slot .price, body.classic-home .slot .price,
body .total strong, body.classic-home .total strong, body.classic-home .theirs .total strong,
body .result-stats strong, body.classic-home .result-stats strong,
body .pet-meta b, body .config-total strong, body .item-value, body .total-value {
  font-family: var(--font-body);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
body .slot .price, body.classic-home .slot .price { font-size: 14px; line-height: 1.3; }
body .total, body.classic-home .total { font-family: var(--font-body); font-size: 14px; font-weight: 600; }
body .total strong, body.classic-home .total strong, body.classic-home .theirs .total strong { font-size: 16px; }
body .result-stats, body.classic-home .result-stats { font-family: var(--font-body); font-size: 13px; font-weight: 600; }
body .result-stats strong, body.classic-home .result-stats strong { font-size: 16px; }
body .result p, body .pet-meta, body .trend-card, body .update-card,
body .config-total, body #quantity, body .item-choice small {
  font-variant-numeric: tabular-nums;
}
body .demand, body .demand-score, body .demand-badge { font-family: var(--font-body); font-weight: 700; font-variant-numeric: tabular-nums; }
body .rarity, body .trend, body .trend-tag { font-size: 13px; line-height: 1.3; }

/* Only actual W/F/L results and VS use the accent face; the empty-state sentence stays UI text. */
body .result .badge, body.classic-home .result .badge { font-family: var(--font-heading); font-weight: 600; }
body .result .result-badge, body.classic-home .result .result-badge,
body .vs, body .trade-swap, body.classic-home .trade-swap {
  font-family: var(--font-game);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.15;
}
body .result .result-badge, body.classic-home .result .result-badge { font-size: clamp(1.125rem, 2vw, 1.375rem); }
body .trade-swap, body.classic-home .trade-swap { font-size: 17px; }

/* Small font-metric allowances retain the existing grids and panel arrangement. */
body .slot strong, body .pet-card h3, body .table-item { overflow-wrap: anywhere; }
body.classic-home .calc-top { gap: 8px; }
body.classic-home .saved-dot, body.classic-home .example-button { font-size: 12px; }
body.classic-home .feature small { line-height: 1.4; }
@media (min-width: 721px) and (max-width: 1000px) {
  body .nav a, body.classic-home .nav a { font-size: 12px; }
  body .brand, body.classic-home .brand { font-size: 13px; }
  body.classic-home .feature b, body.classic-home .feature small { font-size: 12px; }
}
@media (max-width: 720px) {
  body.classic-home .site-header .brand { font-size: 14px; }
  body .nav a, body.classic-home .nav a { font-size: 16px; }
  body.classic-home .offer-heading small { top: -8px; }
  body.classic-home .feature b { font-size: 13px; }
  body.classic-home .feature small { font-size: 12px; }
  body .result-stats, body.classic-home .result-stats { font-size: 12px; }
  body.classic-home .result p { font-size: 13px; }
}
@media (max-width: 360px) {
  body.classic-home .slot strong { font-size: 13px; }
  body.classic-home .slot .edit { font-size: 11px; }
  body.classic-home .saved-dot, body.classic-home .example-button { font-size: 11px; padding-left: 6px; padding-right: 6px; }
  body.classic-home .site-header .brand { font-size: 13px; }
}