/* ============================================================
   VALFORA — Typography Tokens
   
   ⚠️  FONT SUBSTITUTION NOTE:
   The brand uses an unidentified geometric sans-serif (seen in
   the logo). Raleway is used as the closest Google Fonts match
   for display headings. DM Sans for body text. DM Mono for 
   tabular/numeric data. Please confirm actual typefaces with 
   the brand team and supply .woff2 files.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,400&display=swap');

:root {
  /* ── Font Families ───────────────────────────────────────*/
  --font-display: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'DM Mono', 'Menlo', 'Cascadia Code', monospace;

  /* ── Type Scale ──────────────────────────────────────────*/
  --text-2xs:  10px;
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  36px;
  --text-5xl:  48px;

  /* ── Line Heights ────────────────────────────────────────*/
  --leading-none:    1;
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ── Letter Spacing ──────────────────────────────────────*/
  --tracking-tight:   -0.02em;
  --tracking-snug:    -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.15em;

  /* ── Font Weights ────────────────────────────────────────*/
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* ── Semantic text-style composites ─────────────────────
     Use these as shorthand references for consistent type.
     In CSS: font-size, font-weight, line-height, letter-spacing.
  ─────────────────────────────────────────────────────────── */

  /* Display (logo-style, tracking-wide) */
  --ts-display-font:     var(--font-display);
  --ts-display-1-size:   var(--text-5xl);
  --ts-display-1-weight: var(--weight-bold);
  --ts-display-1-leading:var(--leading-tight);
  --ts-display-1-track:  var(--tracking-tight);

  --ts-display-2-size:   var(--text-4xl);
  --ts-display-2-weight: var(--weight-semibold);
  --ts-display-2-leading:var(--leading-tight);

  /* Headings */
  --ts-h1-size:   var(--text-3xl);
  --ts-h1-weight: var(--weight-semibold);
  --ts-h1-leading:var(--leading-snug);

  --ts-h2-size:   var(--text-2xl);
  --ts-h2-weight: var(--weight-semibold);
  --ts-h2-leading:var(--leading-snug);

  --ts-h3-size:   var(--text-xl);
  --ts-h3-weight: var(--weight-semibold);
  --ts-h3-leading:var(--leading-snug);

  --ts-h4-size:   var(--text-lg);
  --ts-h4-weight: var(--weight-medium);
  --ts-h4-leading:var(--leading-snug);

  /* Body */
  --ts-body-lg-size:   var(--text-md);
  --ts-body-lg-leading:var(--leading-relaxed);

  --ts-body-size:   var(--text-base);
  --ts-body-leading:var(--leading-normal);

  --ts-body-sm-size:   var(--text-sm);
  --ts-body-sm-leading:var(--leading-normal);

  /* UI labels */
  --ts-label-size:   var(--text-sm);
  --ts-label-weight: var(--weight-medium);

  --ts-label-xs-size:   var(--text-xs);
  --ts-label-xs-weight: var(--weight-medium);
  --ts-label-xs-track:  var(--tracking-wide);

  /* Mono (numerics, data) */
  --ts-mono-size:    var(--text-base);
  --ts-mono-sm-size: var(--text-sm);
}