:root {
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 22px;
  --text-xl: 28px;
  --text-2xl: 36px;
  --text-3xl: 48px;
  --text-4xl: 64px;
  --text-5xl: 88px;
  --text-6xl: 120px;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.0;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;

  /* Roles */
  --display-font: var(--font-display);
  --display-leading: 0.98;
  --display-tracking: -0.01em;
  --heading-font: var(--font-display);
  --body-font: var(--font-body);
  --label-font: var(--font-body);
}

.amx-display { font-family: var(--font-display); font-weight: 400; line-height: var(--display-leading); letter-spacing: var(--display-tracking); text-transform: lowercase; }
.amx-h1 { font-family: var(--font-display); font-size: var(--text-4xl); line-height: 1; font-weight: 400; }
.amx-h2 { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.05; font-weight: 400; }
.amx-h3 { font-family: var(--font-body); font-size: var(--text-lg); line-height: var(--leading-snug); font-weight: 700; }
.amx-body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); }
.amx-small { font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--leading-normal); }
.amx-label { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.amx-name { font-family: var(--font-logo); font-weight: 400; letter-spacing: -0.01em; }