/* =========================================
   Typography System
   Fonts: Sora · DM Sans · JetBrains Mono
   ========================================= */

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

/* Font stack utilities */
.font-sora { font-family: 'Sora', sans-serif !important; }
.font-dm   { font-family: 'DM Sans', sans-serif !important; }
.font-mono { font-family: 'JetBrains Mono', monospace !important; }

/* ---- Type scale classes ---- */

/* Display — hero headings */
.t-display {
  font-family: 'Sora', sans-serif;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Headline XL — section hero */
.t-headline-xl {
  font-family: 'Sora', sans-serif;
  font-size: clamp(32px, 4.5vw, 48px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* Headline LG — section title */
.t-headline-lg {
  font-family: 'Sora', sans-serif;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Headline MD — card title */
.t-headline-md {
  font-family: 'Sora', sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.35;
}

/* Title MD — sub-sections, card headings */
.t-title-md {
  font-family: 'Sora', sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

/* Body LG — lead text */
.t-body-lg {
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.65;
}

/* Body MD — default body */
.t-body-md {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}

/* Label MD — navigation, tags, buttons */
.t-label-md {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* Label SM — eyebrows, metadata, overlines */
.t-label-sm {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.05em;
}

/* Code — inline code & pre blocks */
.t-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
}

/* Overline — section eyebrow labels */
.t-overline {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
}

/* Color utilities */
.text-primary-token   { color: var(--color-primary) !important; }
.text-secondary-token { color: var(--color-secondary) !important; }
.text-muted-token     { color: var(--color-on-surface-variant) !important; }
.text-surface-token   { color: var(--color-on-surface) !important; }