:root {
  --iz-graphite: #2B2F33;
  --iz-black: #16181A;
  --iz-orange: #FF7A1A;
  --iz-orange-text: #B84A00;
  --iz-steel: #D9DCDF;
  --iz-white: #F7F7F5;
  --iz-green: #3FAF6A;
  --iz-bg-light: #F7F7F5;
  --iz-surface-light: #FFFFFF;
  --iz-bg-dark: #2B2F33;
  --iz-bg-darker: #16181A;
  --iz-text-on-light: #16181A;
  --iz-text-on-dark: #F7F7F5;
  --iz-muted-on-light: #5C6166;
  --iz-muted-on-dark: #A9AFB5;
  --iz-accent: #FF7A1A;
  --iz-on-accent: #16181A;
  --iz-accent-text-on-light: #B84A00;
  --iz-accent-text-on-dark: #FF7A1A;
  --iz-line-on-light: #D9DCDF;
  --iz-line-strong-on-light: #868C92;
  --iz-line-on-dark: #454A50;
  --iz-line-strong-on-dark: #767D83;
  --iz-success-on-light: #1F7A45;
  --iz-success-on-dark: #3FAF6A;
  --iz-warning-on-light: #8C5E00;
  --iz-warning-on-dark: #F2C230;
  --iz-error-on-light: #C0392B;
  --iz-error-on-dark: #FF6F7D;
  --iz-font-sans: "Iztoka Sans", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --iz-font-mono: "Iztoka Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --iz-h1-size: 40px;
  --iz-h1-lh: 1.0;
  --iz-h1-weight: 700;
  --iz-h1-stretch: 75%;
  --iz-h1-tracking: 0.02em;
  --iz-h2-size: 32px;
  --iz-h2-lh: 1.05;
  --iz-h2-weight: 700;
  --iz-h2-stretch: 75%;
  --iz-h2-tracking: 0.02em;
  --iz-h3-size: 26px;
  --iz-h3-lh: 1.1;
  --iz-h3-weight: 700;
  --iz-h3-stretch: 75%;
  --iz-h3-tracking: 0.02em;
  --iz-h4-size: 21px;
  --iz-h4-lh: 1.25;
  --iz-h4-weight: 600;
  --iz-h4-stretch: 100%;
  --iz-h4-tracking: 0em;
  --iz-h5-size: 18px;
  --iz-h5-lh: 1.3;
  --iz-h5-weight: 600;
  --iz-h5-stretch: 100%;
  --iz-h5-tracking: 0em;
  --iz-h6-size: 13px;
  --iz-h6-lh: 1.3;
  --iz-h6-weight: 500;
  --iz-h6-stretch: 100%;
  --iz-h6-tracking: 0.12em;
  --iz-lead-size: 18px;
  --iz-lead-lh: 1.45;
  --iz-lead-weight: 400;
  --iz-lead-stretch: 100%;
  --iz-lead-tracking: 0em;
  --iz-body-size: 16px;
  --iz-body-lh: 1.55;
  --iz-body-weight: 400;
  --iz-body-stretch: 100%;
  --iz-body-tracking: 0em;
  --iz-small-size: 14px;
  --iz-small-lh: 1.45;
  --iz-small-weight: 400;
  --iz-small-stretch: 100%;
  --iz-small-tracking: 0em;
  --iz-caption-size: 12px;
  --iz-caption-lh: 1.4;
  --iz-caption-weight: 500;
  --iz-caption-stretch: 100%;
  --iz-caption-tracking: 0.08em;
  --iz-radius-xs: 2px;
  --iz-radius-sm: 4px;
  --iz-radius-md: 8px;
  --iz-radius-lg: 16px;
  --iz-space-05: 4px;
  --iz-space-1: 8px;
  --iz-space-2: 16px;
  --iz-space-3: 24px;
  --iz-space-4: 32px;
  --iz-space-5: 40px;
  --iz-space-6: 48px;
  --iz-space-8: 64px;
  --iz-space-10: 80px;
  --iz-space-12: 96px;
  --iz-space-16: 128px;
  --iz-c-bg: var(--iz-bg-light);
  --iz-c-surface: var(--iz-surface-light);
  --iz-c-text: var(--iz-text-on-light);
  --iz-c-muted: var(--iz-muted-on-light);
  --iz-c-accent-text: var(--iz-accent-text-on-light);
  --iz-c-line: var(--iz-line-on-light);
  --iz-c-line-strong: var(--iz-line-strong-on-light);
  --iz-c-success: var(--iz-success-on-light);
  --iz-c-warning: var(--iz-warning-on-light);
  --iz-c-error: var(--iz-error-on-light);
}
@media (min-width: 1024px) {
  :root {
    --iz-h1-size: 72px;
    --iz-h2-size: 52px;
    --iz-h3-size: 36px;
    --iz-h4-size: 26px;
    --iz-h5-size: 21px;
    --iz-h6-size: 15px;
    --iz-lead-size: 22px;
    --iz-body-size: 18px;
    --iz-small-size: 15px;
    --iz-caption-size: 13px;
  }
}
.iz-dark {
  --iz-c-bg: var(--iz-bg-dark);
  --iz-c-surface: var(--iz-bg-darker);
  --iz-c-text: var(--iz-text-on-dark);
  --iz-c-muted: var(--iz-muted-on-dark);
  --iz-c-accent-text: var(--iz-accent-text-on-dark);
  --iz-c-line: var(--iz-line-on-dark);
  --iz-c-line-strong: var(--iz-line-strong-on-dark);
  --iz-c-success: var(--iz-success-on-dark);
  --iz-c-warning: var(--iz-warning-on-dark);
  --iz-c-error: var(--iz-error-on-dark);
  background: var(--iz-c-bg);
  color: var(--iz-c-text);
}
.iz-h1 {
  font-family: var(--iz-font-sans);
  font-size: var(--iz-h1-size);
  line-height: var(--iz-h1-lh);
  font-weight: var(--iz-h1-weight);
  font-stretch: var(--iz-h1-stretch);
  letter-spacing: var(--iz-h1-tracking);
  text-transform: uppercase;
}
.iz-h2 {
  font-family: var(--iz-font-sans);
  font-size: var(--iz-h2-size);
  line-height: var(--iz-h2-lh);
  font-weight: var(--iz-h2-weight);
  font-stretch: var(--iz-h2-stretch);
  letter-spacing: var(--iz-h2-tracking);
  text-transform: uppercase;
}
.iz-h3 {
  font-family: var(--iz-font-sans);
  font-size: var(--iz-h3-size);
  line-height: var(--iz-h3-lh);
  font-weight: var(--iz-h3-weight);
  font-stretch: var(--iz-h3-stretch);
  letter-spacing: var(--iz-h3-tracking);
  text-transform: uppercase;
}
.iz-h4 {
  font-family: var(--iz-font-sans);
  font-size: var(--iz-h4-size);
  line-height: var(--iz-h4-lh);
  font-weight: var(--iz-h4-weight);
  font-stretch: var(--iz-h4-stretch);
  letter-spacing: var(--iz-h4-tracking);
}
.iz-h5 {
  font-family: var(--iz-font-sans);
  font-size: var(--iz-h5-size);
  line-height: var(--iz-h5-lh);
  font-weight: var(--iz-h5-weight);
  font-stretch: var(--iz-h5-stretch);
  letter-spacing: var(--iz-h5-tracking);
}
.iz-h6 {
  font-family: var(--iz-font-mono);
  font-size: var(--iz-h6-size);
  line-height: var(--iz-h6-lh);
  font-weight: var(--iz-h6-weight);
  font-stretch: var(--iz-h6-stretch);
  letter-spacing: var(--iz-h6-tracking);
  text-transform: uppercase;
}
.iz-lead {
  font-family: var(--iz-font-sans);
  font-size: var(--iz-lead-size);
  line-height: var(--iz-lead-lh);
  font-weight: var(--iz-lead-weight);
  font-stretch: var(--iz-lead-stretch);
  letter-spacing: var(--iz-lead-tracking);
}
.iz-body {
  font-family: var(--iz-font-sans);
  font-size: var(--iz-body-size);
  line-height: var(--iz-body-lh);
  font-weight: var(--iz-body-weight);
  font-stretch: var(--iz-body-stretch);
  letter-spacing: var(--iz-body-tracking);
}
.iz-small {
  font-family: var(--iz-font-sans);
  font-size: var(--iz-small-size);
  line-height: var(--iz-small-lh);
  font-weight: var(--iz-small-weight);
  font-stretch: var(--iz-small-stretch);
  letter-spacing: var(--iz-small-tracking);
}
.iz-caption {
  font-family: var(--iz-font-mono);
  font-size: var(--iz-caption-size);
  line-height: var(--iz-caption-lh);
  font-weight: var(--iz-caption-weight);
  font-stretch: var(--iz-caption-stretch);
  letter-spacing: var(--iz-caption-tracking);
  text-transform: uppercase;
}
