/* ============================================================
   CloudX WMS — Typography Tokens
   Typeface: Inter (variable). Named roles mirror the "Text Style"
   spec: h1–h4, button1/2, body1/2, OVERLINE, subtitle, caption1/2,
   plus -r responsive variants for narrow viewports.
   ============================================================ */

:root {
  /* ---- Font families ---- */
  --font-sans: var(--wms-font-sans);
  --font-mono: var(--wms-font-mono);

  /* ---- Weights ---- */
  --weight-regular:  400;
  --weight-book:     450;   /* "Weight 450" in the spec — needs the variable font */
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- Named text styles — desktop (font: weight size/lh family) ---- */
  --type-h1:            var(--weight-bold)    30px/36px var(--font-sans);  /* Display Title */
  --type-h2:            var(--weight-book)    24px/32px var(--font-sans);  /* Page Title */
  --type-h3:            var(--weight-medium)  18px/26px var(--font-sans);  /* Modal / Slide-out Title */
  --type-h4:            var(--weight-medium)  15px/22px var(--font-sans);  /* Section Title */
  --type-button1:       var(--weight-medium)  14px/20px var(--font-sans);  /* Action */
  --type-button1-stack: var(--weight-book)    14px/20px var(--font-sans);  /* Action Cluster */
  --type-body1:         var(--weight-regular) 14px/20px var(--font-sans);  /* Body */
  --type-body2:         var(--weight-regular) 13px/20px var(--font-sans);  /* Body XS */
  --type-overline:      var(--weight-medium)  12px/16px var(--font-sans);  /* Breadcrumbs / table heading — uppercase */
  --type-button2:       var(--weight-medium)  12px/16px var(--font-sans);  /* Small actions */
  --type-subtitle:      var(--weight-regular) 12px/16px var(--font-sans);  /* Description / captions */
  --type-caption1:      var(--weight-regular) 11px/14px var(--font-sans);  /* Hint */
  --type-caption2:      var(--weight-medium)  10px/12px var(--font-sans);  /* Badge */

  /* ---- Responsive variants (narrow viewports) ---- */
  --type-h1-r:          var(--weight-bold)    24px/32px var(--font-sans);
  --type-h2-r:          var(--weight-book)    22px/30px var(--font-sans);
  --type-overline-r:    var(--weight-medium)  13px/18px var(--font-sans);
  --type-button2-r:     var(--weight-medium)  13px/18px var(--font-sans);
  --type-subtitle-r:    var(--weight-regular) 13px/18px var(--font-sans);
  --type-caption1-r:    var(--weight-regular) 13px/18px var(--font-sans);

  /* ---- Raw size / line-height ramp (kept for component internals) ---- */
  --text-2xs:        10px;  --lh-2xs:  12px;
  --text-xs:         11px;  --lh-xs:   14px;
  --text-sm:         12px;  --lh-sm:   16px;
  --text-base:       13px;  --lh-base: 20px;
  --text-md:         14px;  --lh-md:   20px;
  --text-lg:         15px;  --lh-lg:   22px;
  --text-xl:         18px;  --lh-xl:   26px;
  --text-2xl:        24px;  --lh-2xl:  32px;
  --text-3xl:        30px;  --lh-3xl:  36px;

  /* ---- Legacy aliases → nearest named style (do not use in new work) ---- */
  --type-display:        var(--type-h1);
  --type-page-title:     var(--type-h1);
  --type-section-title:  var(--type-h2);
  --type-card-title:     var(--type-h3);
  --type-action:         var(--type-button1);
  --type-body:           var(--type-body1);
  --type-body-sm:        var(--type-body2);
  --type-meta:           var(--type-subtitle);
  --type-label:          var(--type-button2);
}