/* ==========================================================================
   Fashion Pedon — Typography tokens

   Three roles, three faces:
   - Display  Bricolage Grotesque  headlines, prices, anything that carries voice
   - Body     Instrument Sans      every sentence, label, and button
   - Utility  DM Mono              SKUs, order numbers, sizes, measurements

   The mono is not decoration. A garment tag is printed in mono, a size label
   is stamped in mono, an order number is read out over the phone in mono.
   Using it for those three things and nothing else keeps it meaningful.
   ========================================================================== */

:root {
  /* ---------- Families --------------------------------------------------- */
  --fp-font-display: "Bricolage Grotesque", "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --fp-font-body:    "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fp-font-mono:    "DM Mono", "SFMono-Regular", ui-monospace, "Menlo", monospace;

  /* ---------- Scale — 1.25 major third, tuned by hand at the ends -------- */
  --fp-text-2xs:  0.6875rem; /* 11px  garment-tag micro copy, care labels    */
  --fp-text-xs:   0.75rem;   /* 12px  eyebrows, badges, table meta           */
  --fp-text-sm:   0.875rem;  /* 14px  secondary copy, form help, nav         */
  --fp-text-base: 1rem;      /* 16px  body default                          */
  --fp-text-lg:   1.125rem;  /* 18px  lead paragraph, card price            */
  --fp-text-xl:   1.375rem;  /* 22px  card titles, section subhead          */
  --fp-text-2xl:  1.75rem;   /* 28px  page titles                           */
  --fp-text-3xl:  2.25rem;   /* 36px  section headlines                     */
  --fp-text-4xl:  3rem;      /* 48px  hero, desktop                         */
  --fp-text-5xl:  4rem;      /* 64px  hero maximum — one per page, at most  */

  /* ---------- Weights ---------------------------------------------------- */
  --fp-weight-regular:  400;
  --fp-weight-medium:   500;
  --fp-weight-semibold: 600;
  --fp-weight-bold:     700;
  --fp-weight-extrabold:800;

  /* ---------- Line height ------------------------------------------------ */
  --fp-leading-flat:    1;     /* numerals, single-line price               */
  --fp-leading-tight:   1.15;  /* display sizes                             */
  --fp-leading-snug:    1.3;   /* card titles, short headings               */
  --fp-leading-normal:  1.55;  /* body copy                                 */
  --fp-leading-relaxed: 1.7;   /* long-form policy pages                    */

  /* ---------- Tracking --------------------------------------------------- */
  --fp-tracking-tighter: -0.03em; /* 4xl / 5xl only                         */
  --fp-tracking-tight:   -0.015em;/* 2xl / 3xl                              */
  --fp-tracking-normal:  0;
  --fp-tracking-wide:    0.04em;
  --fp-tracking-label:   0.1em;   /* uppercase eyebrows and micro labels    */

  /* ---------- Composite roles -------------------------------------------
     Set these on an element and you get a complete, correct treatment.
     Components should reach for a role, not for individual atoms. */

  --fp-role-hero-font:     var(--fp-font-display);
  --fp-role-hero-size:     var(--fp-text-4xl);
  --fp-role-hero-weight:   var(--fp-weight-extrabold);
  --fp-role-hero-leading:  var(--fp-leading-tight);
  --fp-role-hero-tracking: var(--fp-tracking-tighter);

  --fp-role-title-font:     var(--fp-font-display);
  --fp-role-title-size:     var(--fp-text-2xl);
  --fp-role-title-weight:   var(--fp-weight-bold);
  --fp-role-title-leading:  var(--fp-leading-snug);
  --fp-role-title-tracking: var(--fp-tracking-tight);

  --fp-role-body-font:    var(--fp-font-body);
  --fp-role-body-size:    var(--fp-text-base);
  --fp-role-body-weight:  var(--fp-weight-regular);
  --fp-role-body-leading: var(--fp-leading-normal);

  --fp-role-label-font:     var(--fp-font-body);
  --fp-role-label-size:     var(--fp-text-xs);
  --fp-role-label-weight:   var(--fp-weight-semibold);
  --fp-role-label-tracking: var(--fp-tracking-label);
  --fp-role-label-transform: uppercase;

  --fp-role-tag-font:     var(--fp-font-mono);
  --fp-role-tag-size:     var(--fp-text-2xs);
  --fp-role-tag-weight:   var(--fp-weight-medium);
  --fp-role-tag-tracking: var(--fp-tracking-wide);

  --fp-role-price-font:    var(--fp-font-display);
  --fp-role-price-size:    var(--fp-text-lg);
  --fp-role-price-weight:  var(--fp-weight-bold);
  --fp-role-price-leading: var(--fp-leading-flat);
  --fp-role-price-numeric: tabular-nums;
}

/* Larger hero on wide viewports. Declared once, here, so no component has to
   own a breakpoint just to size a headline. */
@media (min-width: 900px) {
  :root {
    --fp-role-hero-size: var(--fp-text-5xl);
    --fp-role-title-size: var(--fp-text-3xl);
  }
}