/*
 * QLeap Design System — Typography Tokens for QBench
 *
 * Fonts: Inter (body, labels, paragraphs) + Inter Display (headings, page titles)
 * Source: QLeap Figma Design System (Foundation | Design System > Typography)
 *
 * Usage: Apply utility classes to HTML elements, e.g. <h4 class="qbench-text-heading-xs">
 * Values are based on actual QLeap component CSS (not just the token definition page).
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Inter+Display:wght@500;600;700&display=swap');

:root {
  /* Font stacks */
  --qbench-font-inter: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --qbench-font-inter-display: 'Inter Display', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Letter spacing */
  --qbench-ls-tight: -0.025em;   /* -2.5% — Display and Heading */
  --qbench-ls-normal: 0em;        /* 0% — Paragraph */
  --qbench-ls-snug: -0.006em;     /* -0.6% — Label (from actual component CSS) */

  /* Display tokens — Inter Display, Extra Bold (800) */
  --qbench-display-xl-size: 128px;
  --qbench-display-xl-lh: 128px;
  --qbench-display-lg-size: 96px;
  --qbench-display-lg-lh: 96px;
  --qbench-display-md-size: 72px;
  --qbench-display-md-lh: 72px;
  --qbench-display-sm-size: 60px;
  --qbench-display-sm-lh: 60px;
  --qbench-display-xs-size: 48px;
  --qbench-display-xs-lh: 48px;
  --qbench-display-weight: 800;

  /* Heading tokens — Inter Display, Semi-Bold (600) */
  --qbench-heading-lg-size: 36px;
  --qbench-heading-lg-lh: 40px;
  --qbench-heading-md-size: 30px;
  --qbench-heading-md-lh: 36px;
  --qbench-heading-sm-size: 24px;
  --qbench-heading-sm-lh: 32px;
  --qbench-heading-xs-size: 20px;
  --qbench-heading-xs-lh: 28px;
  --qbench-heading-weight: 600;

  /* Label tokens — Inter, Semi-Bold (600) */
  --qbench-label-lg-size: 16px;
  --qbench-label-lg-lh: 28px;
  --qbench-label-base-size: 14px;
  --qbench-label-base-lh: 24px;
  --qbench-label-sm-size: 14px;
  --qbench-label-sm-lh: 20px;
  --qbench-label-xs-size: 12px;
  --qbench-label-xs-lh: 16px;
  --qbench-label-weight: 600;

  /* Paragraph tokens — Inter, Medium (500) */
  --qbench-paragraph-lg-size: 16px;
  --qbench-paragraph-lg-lh: 28px;
  --qbench-paragraph-base-size: 14px;
  --qbench-paragraph-base-lh: 24px;
  --qbench-paragraph-sm-size: 14px;
  --qbench-paragraph-sm-lh: 20px;
  --qbench-paragraph-xs-size: 10px;
  --qbench-paragraph-xs-lh: 16px;
  --qbench-paragraph-weight: 500;
}

/* ==========================================================================
   DISPLAY — Inter Display, Extra Bold (800), letter-spacing -2.5%
   ========================================================================== */

.qbench-text-display-xl { font-family: var(--qbench-font-inter-display); font-weight: var(--qbench-display-weight); font-size: var(--qbench-display-xl-size); line-height: var(--qbench-display-xl-lh); letter-spacing: var(--qbench-ls-tight); }
.qbench-text-display-lg { font-family: var(--qbench-font-inter-display); font-weight: var(--qbench-display-weight); font-size: var(--qbench-display-lg-size); line-height: var(--qbench-display-lg-lh); letter-spacing: var(--qbench-ls-tight); }
.qbench-text-display-md { font-family: var(--qbench-font-inter-display); font-weight: var(--qbench-display-weight); font-size: var(--qbench-display-md-size); line-height: var(--qbench-display-md-lh); letter-spacing: var(--qbench-ls-tight); }
.qbench-text-display-sm { font-family: var(--qbench-font-inter-display); font-weight: var(--qbench-display-weight); font-size: var(--qbench-display-sm-size); line-height: var(--qbench-display-sm-lh); letter-spacing: var(--qbench-ls-tight); }
.qbench-text-display-xs { font-family: var(--qbench-font-inter-display); font-weight: var(--qbench-display-weight); font-size: var(--qbench-display-xs-size); line-height: var(--qbench-display-xs-lh); letter-spacing: var(--qbench-ls-tight); }

/* ==========================================================================
   HEADING — Inter Display, Semi-Bold (600), letter-spacing -2.5%
   ========================================================================== */

.qbench-text-heading-lg { font-family: var(--qbench-font-inter-display); font-weight: var(--qbench-heading-weight); font-size: var(--qbench-heading-lg-size); line-height: var(--qbench-heading-lg-lh); letter-spacing: var(--qbench-ls-tight); }
.qbench-text-heading-md { font-family: var(--qbench-font-inter-display); font-weight: var(--qbench-heading-weight); font-size: var(--qbench-heading-md-size); line-height: var(--qbench-heading-md-lh); letter-spacing: var(--qbench-ls-tight); }
.qbench-text-heading-sm { font-family: var(--qbench-font-inter-display); font-weight: var(--qbench-heading-weight); font-size: var(--qbench-heading-sm-size); line-height: var(--qbench-heading-sm-lh); letter-spacing: var(--qbench-ls-tight); }
.qbench-text-heading-xs { font-family: var(--qbench-font-inter-display); font-weight: var(--qbench-heading-weight); font-size: var(--qbench-heading-xs-size); line-height: var(--qbench-heading-xs-lh); letter-spacing: var(--qbench-ls-tight); }

/* ==========================================================================
   LABEL — Inter, Semi-Bold (600), letter-spacing -0.006em
   ========================================================================== */

.qbench-text-label-lg   { font-family: var(--qbench-font-inter); font-weight: var(--qbench-label-weight); font-size: var(--qbench-label-lg-size); line-height: var(--qbench-label-lg-lh); letter-spacing: var(--qbench-ls-snug); }
.qbench-text-label-base { font-family: var(--qbench-font-inter); font-weight: var(--qbench-label-weight); font-size: var(--qbench-label-base-size); line-height: var(--qbench-label-base-lh); letter-spacing: var(--qbench-ls-snug); }
.qbench-text-label-sm   { font-family: var(--qbench-font-inter); font-weight: var(--qbench-label-weight); font-size: var(--qbench-label-sm-size); line-height: var(--qbench-label-sm-lh); letter-spacing: var(--qbench-ls-snug); }
.qbench-text-label-xs   { font-family: var(--qbench-font-inter); font-weight: var(--qbench-label-weight); font-size: var(--qbench-label-xs-size); line-height: var(--qbench-label-xs-lh); letter-spacing: var(--qbench-ls-snug); }

/* ==========================================================================
   PARAGRAPH — Inter, Medium (500), letter-spacing 0
   ========================================================================== */

.qbench-text-paragraph-lg   { font-family: var(--qbench-font-inter); font-weight: var(--qbench-paragraph-weight); font-size: var(--qbench-paragraph-lg-size); line-height: var(--qbench-paragraph-lg-lh); letter-spacing: var(--qbench-ls-normal); }
.qbench-text-paragraph-base { font-family: var(--qbench-font-inter); font-weight: var(--qbench-paragraph-weight); font-size: var(--qbench-paragraph-base-size); line-height: var(--qbench-paragraph-base-lh); letter-spacing: var(--qbench-ls-normal); }
.qbench-text-paragraph-sm   { font-family: var(--qbench-font-inter); font-weight: var(--qbench-paragraph-weight); font-size: var(--qbench-paragraph-sm-size); line-height: var(--qbench-paragraph-sm-lh); letter-spacing: var(--qbench-ls-normal); }
.qbench-text-paragraph-xs   { font-family: var(--qbench-font-inter); font-weight: var(--qbench-paragraph-weight); font-size: var(--qbench-paragraph-xs-size); line-height: var(--qbench-paragraph-xs-lh); letter-spacing: var(--qbench-ls-normal); }