@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
     Mapped to Tailwind mental model:
       h1 ≈ text-3xl (30px) - page titles
       h2 ≈ text-2xl (24px) - section headings
       h3 ≈ text-xl  (20px) - card titles, subsections
       h4 ≈ text-base (16px) - minor headings
       h5 ≈ text-sm  (14px) - small headings
       h6 ≈ text-xs  (12px) - eyebrows, labels (uppercase)
     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 ≈ text-base emphasized (used for intro paragraphs)
     .small ≈ text-sm */
  .lead { font-size: var(--fs-h4); line-height: var(--lh-body); }  /* ≈ text-base */
  small, .small { font-size: var(--fs-sm); line-height: 1.5; }     /* ≈ text-sm */
  .form-text { font-size: max(var(--fs-sm), 0.875rem); line-height: 1.5; }

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

  /* 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; }

  /* Developer Quick Reference: Tailwind ↔ Token Mapping
     ─────────────────────────────────────────────────────
     When designing components, think in Tailwind sizes:

     | Use Case        | Tailwind   | Token      | Size  |
     |-----------------|------------|------------|-------|
     | Hero headline   | text-4xl   | fs-hero    | 36px  |
     | Page title      | text-3xl   | fs-h1      | 30px  |
     | Section heading | text-2xl   | fs-h2      | 24px  |
     | Card title      | text-xl    | fs-h3      | 20px  |
     | Body copy       | text-base  | fs-body    | 16px  |
     | Meta/small      | text-sm    | fs-sm      | 14px  |
     | Eyebrow/label   | text-xs    | fs-xs/h6   | 12px  |

     Example component spec:
       "Title: H3 (text-xl), body: text-base, meta: text-sm"
  */
}

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