/* ================================================================
   KikoPop — Typography
   Headings, body text, links, special text styles
   ================================================================ */

/* ── Headings ── */
h1, h2, h3, h4, h5, h6,
.kp-h1, .kp-h2, .kp-h3, .kp-h4 {
  font-family: var(--kp-font-head);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--kp-text);
}

h1, .kp-h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
h2, .kp-h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h3, .kp-h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h4, .kp-h4 { font-size: clamp(1.1rem, 2vw, 1.25rem); }

/* ── Body Text ── */
p { margin-bottom: var(--kp-sp-4); }
.kp-text-lg  { font-size: 1.125rem; line-height: 1.7; }
.kp-text-sm  { font-size: 0.875rem; }
.kp-text-xs  { font-size: 0.75rem; }

/* ── Subdued text ── */
.kp-text-muted   { color: var(--kp-text-2); }
.kp-text-faint   { color: var(--kp-text-3); }

/* ── Brand highlight text ── */
.kp-text-primary  { color: var(--kp-color-primary); }
.kp-text-accent   { color: var(--kp-color-accent); }

/* ── Section label (uppercase chip) ── */
.kp-label {
  display: inline-flex;
  align-items: center;
  gap: var(--kp-sp-2);
  font-family: var(--kp-font-head);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kp-color-primary);
  background: rgba(255,107,107,0.1);
  border: 1px solid rgba(255,107,107,0.2);
  border-radius: var(--kp-radius-full);
  padding: var(--kp-sp-1) var(--kp-sp-3);
  margin-bottom: var(--kp-sp-4);
}

[data-theme="dark"] .kp-label {
  background: rgba(255,107,107,0.12);
  border-color: rgba(255,107,107,0.25);
}

/* ── Links ── */
.kp-link {
  color: var(--kp-color-primary);
  font-weight: 600;
  transition: color var(--kp-ease);
  border-bottom: 1.5px solid transparent;
}
.kp-link:hover {
  color: var(--kp-color-primary-dk);
  border-bottom-color: var(--kp-color-primary-dk);
}