/* Bin Najeeb typography system — use --type-* tokens; avoid raw font-size in components */

/* Semantic utilities */
.type-h1 { font-family: var(--font-heading); font-size: var(--type-h1); font-weight: var(--weight-light); line-height: var(--line-height-tight); }
.type-h2 { font-family: var(--font-heading); font-size: var(--type-h2); font-weight: var(--weight-light); line-height: var(--line-height-tight); }
.type-h3 { font-family: var(--font-heading); font-size: var(--type-h3); font-weight: var(--weight-light); line-height: var(--line-height-tight); }
.type-body { font-family: var(--font-body); font-size: var(--type-body); line-height: var(--line-height-body); }
.type-body-sm { font-family: var(--font-body); font-size: var(--type-body-sm); line-height: var(--line-height-body); }
.type-caption { font-family: var(--font-body); font-size: var(--type-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; }
.type-ui { font-family: var(--font-body); font-size: var(--type-ui); letter-spacing: 1.5px; text-transform: uppercase; }
.type-micro { font-family: var(--font-body); font-size: var(--type-micro); }

.type-product-name {
  font-family: var(--font-heading);
  font-size: var(--type-product-name);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-product-name);
  text-transform: uppercase;
  line-height: var(--line-height-product);
}

.type-product-family {
  font-family: var(--font-body);
  font-size: var(--type-product-family);
  letter-spacing: var(--tracking-product-family);
  text-transform: uppercase;
}

.type-product-price {
  font-family: var(--font-body);
  font-size: var(--type-product-price);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  color: var(--color-gold);
}

.type-product-price-lg {
  font-family: var(--font-body);
  font-size: var(--type-product-price-lg);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  color: var(--color-gold);
}

@media (max-width: 1024px) {
  :root {
    --type-h1: clamp(36px, 5vw, 56px);
    --type-h2: clamp(32px, 3.5vw, 40px);
  }
}

@media (max-width: 768px) {
  :root {
    --type-h3: clamp(22px, 4vw, 26px);
    --type-product-name: clamp(16px, 3.5vw, 17px);
  }
}

@media (max-width: 480px) {
  :root {
    --type-body-sm: 15px;
    --type-body: 16px;
  }
}