/* ============================================
   IGNIS Unified Typography System
   ============================================ */

:root {
  /* Font sizes */
  --text-h1: clamp(2.25rem, 3vw + 0.5rem, 3.5rem);   /* 56px max */
  --text-h2: clamp(1.75rem, 2vw + 0.5rem, 2.5rem);   /* 40px max */
  --text-h3: clamp(1.25rem, 1.5vw + 0.25rem, 1.75rem); /* 28px max */
  --text-body: clamp(1rem, 0.5vw + 0.875rem, 1.125rem); /* 18px max */
  --text-sm: 0.875rem;   /* 14px */
  --text-xs: 0.75rem;    /* 12px */

  /* Line heights */
  --leading-headings: 1.1;
  --leading-body: 1.6;

  /* Font weights */
  --weight-bold: 700;
  --weight-medium: 500;
  --weight-normal: 400;

  /* Colors */
  --color-heading: #111827;
  --color-body: #4b5563;
  --color-muted: #6b7280;

  /* Spacing tokens */
  --space-heading-to-paragraph: 1.5rem;
  --space-paragraph-to-button: 2rem;
  --space-section-y: 6rem;       /* 96px desktop */
  --space-section-y-mobile: 4rem; /* 64px mobile */
  --space-card-gap: 2rem;        /* 32px */
  --space-card-gap-mobile: 1.5rem; /* 24px */
  --container-max: 1200px;
}

/* Utility classes for typography */
.text-h1 {
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  line-height: var(--leading-headings);
  color: var(--color-heading);
}

.text-h2 {
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-headings);
  color: var(--color-heading);
}

.text-h3 {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  line-height: var(--leading-headings);
  color: var(--color-heading);
}

.text-body {
  font-size: var(--text-body);
  font-weight: var(--weight-normal);
  line-height: var(--leading-body);
  color: var(--color-body);
}

.text-sm {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-muted);
}

/* Label style — small, medium weight, muted */
.text-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #dc2626;
}

/* Spacing utilities */
.space-heading-paragraph {
  margin-bottom: var(--space-heading-to-paragraph);
}

.space-paragraph-button {
  margin-bottom: var(--space-paragraph-to-button);
}

/* Section spacing utility */
.section-spacing {
  padding-top: var(--space-section-y-mobile);
  padding-bottom: var(--space-section-y-mobile);
}

@media (min-width: 768px) {
  .section-spacing {
    padding-top: var(--space-section-y);
    padding-bottom: var(--space-section-y);
  }
}

/* Container */
.container-ignis {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (min-width: 1024px) {
  .container-ignis {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Grid gap for cards */
.grid-cards {
  gap: var(--space-card-gap-mobile);
}

@media (min-width: 768px) {
  .grid-cards {
    gap: var(--space-card-gap);
  }
}

/* Responsive: headings on mobile */
@media (max-width: 767px) {
  :root {
    --text-h1: 2rem;
    --text-h2: 1.5rem;
    --text-h3: 1.25rem;
  }
}