/**
 * Antumo Design System - Typography Variables
 * Generated from Figma: https://www.figma.com/design/aKIP8PcGfbAMKAZNhEbDOZ/Antumo-|-Design-System?node-id=1-12
 */

:root {
  /* ===== Font Families ===== */
  --font-family-brand: 'CircularXX', sans-serif;
  --font-family-system: 'Inter', sans-serif;

  /* ===== Font Weights ===== */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-book: 450;
  --font-weight-semibold: 450;  /* Figma "semibold" = CircularXX Book */
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* ===== Font Sizes ===== */
  --font-size-3xs: 0.6875rem;  /* 11px - for micro UI elements like badges */
  --font-size-2xs: 0.75rem;    /* 12px */
  --font-size-xs: 0.875rem;    /* 14px */
  --font-size-sm: 1rem;        /* 16px */
  --font-size-md: 1.25rem;     /* 20px */
  --font-size-lg: 1.5rem;      /* 24px */
  --font-size-xl: 1.75rem;     /* 28px */
  --font-size-2xl: 2rem;       /* 32px */

  /* ===== Line Heights ===== */
  --line-height-3xs: 1;        /* 1:1 ratio - for micro UI elements */
  --line-height-2xs: 1rem;     /* 16px */
  --line-height-2xs-xs: 1.125rem; /* 18px - for text-xs */
  --line-height-xs: 1.25rem;   /* 20px */
  --line-height-sm: 1.5rem;    /* 24px */
  --line-height-md: 1.75rem;   /* 28px */
  --line-height-md-lg: 1.875rem; /* 30px - for text-xl */
  --line-height-lg: 2rem;      /* 32px */
  --line-height-xl: 2.25rem;   /* 36px */

  /* ===== Letter Spacing ===== */
  --letter-spacing-tight: -1%;
  --letter-spacing-normal: 0%;

  /* ===== Heading Styles ===== */
  /* Heading 2xl: CircularXX Bold, 32px/36px, -1% */
  --heading-2xl-font-family: var(--font-family-brand);
  --heading-2xl-font-size: var(--font-size-2xl);
  --heading-2xl-font-weight: var(--font-weight-bold);
  --heading-2xl-line-height: var(--line-height-xl);
  --heading-2xl-letter-spacing: -0.32px;

  /* Heading xl: CircularXX Bold, 28px/32px, -1% */
  --heading-xl-font-family: var(--font-family-brand);
  --heading-xl-font-size: var(--font-size-xl);
  --heading-xl-font-weight: var(--font-weight-bold);
  --heading-xl-line-height: var(--line-height-lg);
  --heading-xl-letter-spacing: -0.28px;

  /* Heading lg: CircularXX Bold, 24px/28px, -1% */
  --heading-lg-font-family: var(--font-family-brand);
  --heading-lg-font-size: var(--font-size-lg);
  --heading-lg-font-weight: var(--font-weight-bold);
  --heading-lg-line-height: var(--line-height-md);
  --heading-lg-letter-spacing: -0.24px;

  /* Heading md: CircularXX Bold, 20px/24px, -1% */
  --heading-md-font-family: var(--font-family-brand);
  --heading-md-font-size: var(--font-size-md);
  --heading-md-font-weight: var(--font-weight-bold);
  --heading-md-line-height: var(--line-height-sm);
  --heading-md-letter-spacing: -0.2px;

  /* Heading sm: CircularXX Bold, 16px/20px, -1% */
  --heading-sm-font-family: var(--font-family-brand);
  --heading-sm-font-size: var(--font-size-sm);
  --heading-sm-font-weight: var(--font-weight-bold);
  --heading-sm-line-height: var(--line-height-xs);
  --heading-sm-letter-spacing: -0.16px;

  /* Heading xs: CircularXX Bold, 14px/20px, -1% */
  --heading-xs-font-family: var(--font-family-brand);
  --heading-xs-font-size: var(--font-size-xs);
  --heading-xs-font-weight: var(--font-weight-bold);
  --heading-xs-line-height: var(--line-height-xs);
  --heading-xs-letter-spacing: -0.14px;

  /* Heading 2xs: CircularXX Bold, 12px/16px, -1% */
  --heading-2xs-font-family: var(--font-family-brand);
  --heading-2xs-font-size: var(--font-size-2xs);
  --heading-2xs-font-weight: var(--font-weight-bold);
  --heading-2xs-line-height: var(--line-height-2xs);
  --heading-2xs-letter-spacing: -0.12px;

  /* ===== Body Styles ===== */
  /* Body lg: CircularXX Light, 16px/24px, 0% */
  --body-lg-font-family: var(--font-family-brand);
  --body-lg-font-size: var(--font-size-sm);
  --body-lg-font-weight: var(--font-weight-light);
  --body-lg-line-height: var(--line-height-sm);
  --body-lg-letter-spacing: 0;

  /* Body md: CircularXX Light, 14px/20px, 0% */
  --body-md-font-family: var(--font-family-brand);
  --body-md-font-size: var(--font-size-xs);
  --body-md-font-weight: var(--font-weight-light);
  --body-md-line-height: var(--line-height-xs);
  --body-md-letter-spacing: 0;

  /* Body sm: CircularXX Light, 12px/16px, 0% */
  --body-sm-font-family: var(--font-family-brand);
  --body-sm-font-size: var(--font-size-2xs);
  --body-sm-font-weight: var(--font-weight-light);
  --body-sm-line-height: var(--line-height-2xs);
  --body-sm-letter-spacing: 0;

  /* ===== Label Styles ===== */
  /* Label lg: CircularXX Book, 16px/24px, 0% */
  --label-lg-font-family: var(--font-family-brand);
  --label-lg-font-size: var(--font-size-sm);
  --label-lg-font-weight: var(--font-weight-book);
  --label-lg-line-height: var(--line-height-sm);
  --label-lg-letter-spacing: 0;

  /* Label md: CircularXX Book, 14px/20px, 0% */
  --label-md-font-family: var(--font-family-brand);
  --label-md-font-size: var(--font-size-xs);
  --label-md-font-weight: var(--font-weight-book);
  --label-md-line-height: var(--line-height-xs);
  --label-md-letter-spacing: 0;

  /* Label sm: CircularXX Book, 12px/16px, 0% */
  --label-sm-font-family: var(--font-family-brand);
  --label-sm-font-size: var(--font-size-2xs);
  --label-sm-font-weight: var(--font-weight-book);
  --label-sm-line-height: var(--line-height-2xs);
  --label-sm-letter-spacing: 0;

  /* ===== Button Styles ===== */
  /* Button lg: CircularXX Bold, 16px/24px, -1% */
  --button-lg-font-family: var(--font-family-brand);
  --button-lg-font-size: var(--font-size-sm);
  --button-lg-font-weight: var(--font-weight-bold);
  --button-lg-line-height: var(--line-height-sm);
  --button-lg-letter-spacing: -0.16px;

  /* Button md: CircularXX Bold, 14px/20px, -1% */
  --button-md-font-family: var(--font-family-brand);
  --button-md-font-size: var(--font-size-xs);
  --button-md-font-weight: var(--font-weight-bold);
  --button-md-line-height: var(--line-height-xs);
  --button-md-letter-spacing: -0.14px;
}

/* ===== Typography Utility Classes ===== */

/* Headings */
.heading-2xl {
  font-family: var(--heading-2xl-font-family);
  font-size: var(--heading-2xl-font-size);
  font-weight: var(--heading-2xl-font-weight);
  line-height: var(--heading-2xl-line-height);
  letter-spacing: var(--heading-2xl-letter-spacing);
}

.heading-xl {
  font-family: var(--heading-xl-font-family);
  font-size: var(--heading-xl-font-size);
  font-weight: var(--heading-xl-font-weight);
  line-height: var(--heading-xl-line-height);
  letter-spacing: var(--heading-xl-letter-spacing);
}

.heading-lg {
  font-family: var(--heading-lg-font-family);
  font-size: var(--heading-lg-font-size);
  font-weight: var(--heading-lg-font-weight);
  line-height: var(--heading-lg-line-height);
  letter-spacing: var(--heading-lg-letter-spacing);
}

.heading-md {
  font-family: var(--heading-md-font-family);
  font-size: var(--heading-md-font-size);
  font-weight: var(--heading-md-font-weight);
  line-height: var(--heading-md-line-height);
  letter-spacing: var(--heading-md-letter-spacing);
}

.heading-sm {
  font-family: var(--heading-sm-font-family);
  font-size: var(--heading-sm-font-size);
  font-weight: var(--heading-sm-font-weight);
  line-height: var(--heading-sm-line-height);
  letter-spacing: var(--heading-sm-letter-spacing);
}

.heading-xs {
  font-family: var(--heading-xs-font-family);
  font-size: var(--heading-xs-font-size);
  font-weight: var(--heading-xs-font-weight);
  line-height: var(--heading-xs-line-height);
  letter-spacing: var(--heading-xs-letter-spacing);
}

.heading-2xs {
  font-family: var(--heading-2xs-font-family);
  font-size: var(--heading-2xs-font-size);
  font-weight: var(--heading-2xs-font-weight);
  line-height: var(--heading-2xs-line-height);
  letter-spacing: var(--heading-2xs-letter-spacing);
}

/* Body */
.body-lg {
  font-family: var(--body-lg-font-family);
  font-size: var(--body-lg-font-size);
  font-weight: var(--body-lg-font-weight);
  line-height: var(--body-lg-line-height);
  letter-spacing: var(--body-lg-letter-spacing);
}

.body-md {
  font-family: var(--body-md-font-family);
  font-size: var(--body-md-font-size);
  font-weight: var(--body-md-font-weight);
  line-height: var(--body-md-line-height);
  letter-spacing: var(--body-md-letter-spacing);
}

.body-sm {
  font-family: var(--body-sm-font-family);
  font-size: var(--body-sm-font-size);
  font-weight: var(--body-sm-font-weight);
  line-height: var(--body-sm-line-height);
  letter-spacing: var(--body-sm-letter-spacing);
}

/* Labels */
.label-lg {
  font-family: var(--label-lg-font-family);
  font-size: var(--label-lg-font-size);
  font-weight: var(--label-lg-font-weight);
  line-height: var(--label-lg-line-height);
  letter-spacing: var(--label-lg-letter-spacing);
}

.label-md {
  font-family: var(--label-md-font-family);
  font-size: var(--label-md-font-size);
  font-weight: var(--label-md-font-weight);
  line-height: var(--label-md-line-height);
  letter-spacing: var(--label-md-letter-spacing);
}

.label-sm {
  font-family: var(--label-sm-font-family);
  font-size: var(--label-sm-font-size);
  font-weight: var(--label-sm-font-weight);
  line-height: var(--label-sm-line-height);
  letter-spacing: var(--label-sm-letter-spacing);
}

/* Buttons */
.button-lg {
  font-family: var(--button-lg-font-family);
  font-size: var(--button-lg-font-size);
  font-weight: var(--button-lg-font-weight);
  line-height: var(--button-lg-line-height);
  letter-spacing: var(--button-lg-letter-spacing);
}

.button-md {
  font-family: var(--button-md-font-family);
  font-size: var(--button-md-font-size);
  font-weight: var(--button-md-font-weight);
  line-height: var(--button-md-line-height);
  letter-spacing: var(--button-md-letter-spacing);
}