/* ═══════════════════════════════════════
   TYPOGRAPHY — Global type styles
   ═══════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap');

body {
  font-family: 'Cairo', sans-serif;
  font-size: var(--y-font-m);
  font-weight: var(--y-weight-regular);
  color: var(--y-color-text);
  background: var(--y-color-bg);
  line-height: 1.7;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--y-weight-bold);
  line-height: 1.3;
  color: var(--y-color-text);
}

h1 {
  font-size: var(--y-font-4xl);
  margin-bottom: var(--y-space-l);
}

h2 {
  font-size: var(--y-font-xxxl);
  margin-bottom: var(--y-space-m);
}

h3 {
  font-size: var(--y-font-xxl);
  margin-bottom: var(--y-space-s);
}

h4 {
  font-size: var(--y-font-xl);
  margin-bottom: var(--y-space-s);
}

h5 {
  font-size: var(--y-font-l);
  margin-bottom: var(--y-space-xs);
}

h6 {
  font-size: var(--y-font-m);
  margin-bottom: var(--y-space-xs);
}

p {
  margin-bottom: var(--y-space-l);
  line-height: 1.7;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--y-color-primary);
  transition: color var(--y-transition-fast);
}

a:hover {
  color: var(--y-color-primary-subtle);
}

strong,
b {
  font-weight: var(--y-weight-bold);
}

em,
i {
  font-style: italic;
}

small {
  font-size: var(--y-font-s);
}

mark {
  background: rgba(139, 105, 20, 0.15);
  padding: 0.1em 0.3em;
  border-radius: var(--y-radius-s);
}

code,
pre {
  font-family: 'Cairo', monospace;
  font-size: var(--y-font-s);
}

::selection {
  background: var(--y-color-primary);
  color: var(--y-color-white);
}

.text-white {
  color: var(--y-color-white);
}

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

.text-gold {
  color: var(--y-color-primary);
}

.text-gold-bright {
  color: var(--y-color-secondary);
}

.text-burgundy {
  color: var(--y-color-accent);
}

.text-red {
  color: var(--y-color-danger);
}

.text-green {
  color: var(--y-color-success);
}

.fw-400 {
  font-weight: var(--y-weight-regular);
}

.fw-500 {
  font-weight: var(--y-weight-medium);
}

.fw-600 {
  font-weight: var(--y-weight-semibold);
}

.fw-700 {
  font-weight: var(--y-weight-bold);
}

.fw-800 {
  font-weight: var(--y-weight-extrabold);
}

.text-xs {
  font-size: var(--y-font-xs);
}

.text-sm {
  font-size: var(--y-font-s);
}

.text-base {
  font-size: var(--y-font-m);
}

.text-lg {
  font-size: var(--y-font-l);
}

.text-xl {
  font-size: var(--y-font-xl);
}

.text-2xl {
  font-size: var(--y-font-xxl);
}

.text-3xl {
  font-size: var(--y-font-xxxl);
}

.text-4xl {
  font-size: var(--y-font-4xl);
}

.leading-relaxed {
  line-height: 1.7;
}

.gradient-text {
  background: linear-gradient(to left, var(--y-color-secondary), var(--y-color-secondary-subtle));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ═══════════════════════════════════════
   RESPONSIVE STYLES
   ═══════════════════════════════════════ */

@media (max-width: 1200px) {
  h1 {
    font-size: var(--y-font-xxxl);
  }

  h2 {
    font-size: var(--y-font-xxl);
  }
}

@media (max-width: 992px) {
  h1 {
    font-size: var(--y-font-xxl);
  }

  h2 {
    font-size: var(--y-font-xl);
  }

  h3 {
    font-size: var(--y-font-xl);
  }
}

@media (max-width: 768px) {
  h1 {
    font-size: var(--y-font-xl);
  }

  h2 {
    font-size: var(--y-font-xl);
  }

  h3 {
    font-size: var(--y-font-l);
  }

  .text-3xl {
    font-size: var(--y-font-xxl);
  }

  .text-4xl {
    font-size: var(--y-font-xxxl);
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: var(--y-font-xl);
  }

  h2 {
    font-size: var(--y-font-xxl);
  }

  /* Increased from -l to -xxl */
  h3 {
    font-size: var(--y-font-xl);
  }

  /* Increased from -m to -xl */

  body {
    line-height: 1.8;
  }
}