/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: 1.5;
  background-color: var(--zebra-bg);
  color: var(--zebra-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.zebra-title {
  font-family: var(--font-title);
  color: var(--zebra-dark);
  line-height: 1.2;
  font-weight: var(--font-bold);
}

h1, .zebra-title-xl {
  font-size: var(--text-4xl);
  margin-bottom: var(--space-md);
}

h2, .zebra-title-lg {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-sm);
}

h3, .zebra-title-md {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-sm);
}

h4, .zebra-title-sm {
  font-size: var(--text-xl);
  margin-bottom: var(--space-xs);
}

p, .zebra-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  margin-bottom: var(--space-sm);
}

.zebra-body-lg {
  font-size: var(--text-lg);
}

.zebra-body-sm {
  font-size: var(--text-sm);
  color: var(--zebra-slate);
}

.zebra-body-xs {
  font-size: var(--text-xs);
  color: var(--zebra-slate);
}

/* Text Colors */
.text-brown { color: var(--zebra-brown); }
.text-sand { color: var(--zebra-sand); }
.text-terracotta { color: var(--zebra-terracotta); }
.text-ocre { color: var(--zebra-ocre); }
.text-dark { color: var(--zebra-dark); }
.text-slate { color: var(--zebra-slate); }
.text-gray-light { color: var(--zebra-gray-light); }
.text-white { color: var(--zebra-white); }

/* Font Weights */
.font-light { font-weight: var(--font-light); }
.font-regular { font-weight: var(--font-regular); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }
.font-black { font-weight: var(--font-black); }