@layer tokens, base, components, utilities;

/* --------------------------------------
   BASE (fixed typography)
-------------------------------------- */
@layer base {
  html { font-size: 16px; } /* fixed, no clamp */

  body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-body);
    font-variant-numeric: proportional-nums;
    font-synthesis-weight: none;
    font-synthesis-style: none;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
  }

  /* Headline hierarchy (display face for H1–H3 @700, H4–H6 @600) */
  h1, .h1, h2, .h2, h3, .h3 {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    letter-spacing: -0.01em;
    margin: 0 0 .75rem;
  }
  h4, .h4, h5, .h5, h6, .h6 {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    margin: 0 0 .5rem;
  }

  h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
  h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); }
  h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-head); }

  h4, .h4 { font-size: var(--fs-h4); line-height: 1.28; }
  h5, .h5 { font-size: var(--fs-h5); line-height: 1.32; }
  h6, .h6 { font-size: var(--fs-h6); line-height: 1.4; letter-spacing: .04em; text-transform: uppercase; }

  /* Map Bootstrap displays to fixed sizes */
  .display-1 { font-family: var(--font-display); font-weight: var(--weight-bold); letter-spacing:-.01em; font-size: var(--fs-h1); line-height: 1.1; }
  .display-2 { font-family: var(--font-display); font-weight: var(--weight-bold); letter-spacing:-.01em; font-size: var(--fs-h2); line-height: 1.15; }
  .display-3 { font-family: var(--font-display); font-weight: var(--weight-bold); letter-spacing:-.01em; font-size: var(--fs-h3); line-height: 1.2; }
  .display-4 { font-family: var(--font-display); font-weight: var(--weight-bold); letter-spacing:-.01em; font-size: var(--fs-h4); line-height: 1.25; }

  /* Common text utilities */
  .lead { font-size: var(--fs-h4); line-height: var(--lh-body); }
  small, .small { font-size: var(--fs-sm); line-height: 1.5; }
  .form-text { font-size: max(var(--fs-sm), 0.875rem); line-height: 1.5; }

  /* Buttons & badges (typography only) */
  .btn { font-size: var(--fs-body); line-height: 1.25; font-weight: var(--weight-medium); }
  .btn-sm { font-size: var(--fs-sm); }
  .btn-lg { font-size: var(--fs-h4); }
  .badge  { font-size: var(--fs-sm); font-weight: var(--weight-semibold); }

  /* CTAs inherit button typography */
  .btn-primary-cta,
  .btn-secondary-cta { font-size: var(--fs-body); line-height: 1.25; font-weight: var(--weight-medium); }

  /* Forms */
  label { font-size: max(var(--fs-sm), 0.875rem); font-weight: var(--weight-medium); }
  .form-control,
  .form-select,
  .form-control::placeholder { font-size: var(--fs-body); }

  /* Numeric utilities */
  .price, .amount, .st-price-origin, [data-total_price] { font-variant-numeric: tabular-nums; }
  .u-tabular { font-variant-numeric: tabular-nums; }
  .u-proportional { font-variant-numeric: proportional-nums; }
  .u-optical { font-optical-sizing: auto; }
  .u-no-optical { font-optical-sizing: none; }
}

/* components layer handled by individual component files */
@layer components {}