/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
body {
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em;
  line-height: 1.2;
  color: var(--color-text-primary);
}

/* Base (Desktop) sizes */
h1 { font-size: 2.5rem; font-weight: 800; }
h2 { font-size: 2rem;   font-weight: 800; }
h3 { font-size: 1.5rem; font-weight: 700; }
h4 { font-size: 1.2rem; font-weight: 600; }
h5 { font-size: 1rem;   font-weight: 600; }

p {
  margin-bottom: 1rem;
  color: var(--color-text-secondary);
}

.font-inter {
  font-family: 'Inter', sans-serif;
}

.font-degular {
  font-family: 'Degular Display', system-ui, sans-serif;
}

/* =========================================
   GLOBAL MOBILE TYPOGRAPHY (max‑width: 767px)
   ========================================= */
@media (max-width: 767px) {
  body,
  p,
  .entry-content,
  .single-entry-content,
  .datochai-prose-content {
    font-size: 12px !important;
    line-height: 1rem !important;
  }

  /* Headings – smaller but still distinct */
  h2 { font-size: 1.5rem  !important; }   /* 24px */
  h3 { font-size: 1.25rem !important; }   /* 20px */
  h4 { font-size: 1.1rem  !important; }   /* ~18px */
  h5 { font-size: 1rem    !important; }   /* 16px */

  /* Buttons */
  button,
  .btn,
  .datochai-btn,
  .crc-btn-primary,
  .submit-btn-brand,
  .contact-btn,
  .pakar-cta-btn,
  .view-all-btn {
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  button,
  .btn,
  .datochai-btn {
    font-size: 14px !important;
  }
}

/* =========================================
   TABLET TYPOGRAPHY (768px – 1024px)
   ========================================= */
@media (min-width: 768px) and (max-width: 1024px) {
  body,
  p,
  .entry-content,
  .single-entry-content,
  .datochai-prose-content {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  h2 { font-size: 1.8rem  !important; }   /* ~29px */
  h3 { font-size: 1.4rem  !important; }   /* ~22px */
  h4 { font-size: 1.2rem  !important; }   /* ~19px */
  h5 { font-size: 1rem    !important; }   /* 16px */

  button,
  .btn,
  .datochai-btn,
  .crc-btn-primary,
  .submit-btn-brand,
  .contact-btn,
  .pakar-cta-btn,
  .view-all-btn {
    font-size: 15px !important;
    font-weight: 700 !important;
  }
}

/* =========================================
   DESKTOP FINE‑TUNING (≥1025px) – keep base sizes, just ensure consistency
   ========================================= */
@media (min-width: 1025px) {
  body,
  p {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  /* Headings already defined at top, no need to override unless you want specific scaling.
     If you want them slightly larger on big screens, uncomment the following:
  h2 { font-size: 2.2rem; }
  h3 { font-size: 1.6rem; }
  h4 { font-size: 1.3rem; }
  */
}