/* ============================================================
   Fluent / Windows — Typography
   Font: Segoe UI Variable (Windows system font, not redistributable).
   We use the OS font stack: on Windows this renders the real Segoe
   UI Variable; elsewhere it falls back gracefully to system UI fonts.
   The Fluent type ramp below matches the WinUI text styles.
   ============================================================ */

:root {
  /* Font families */
  --font-family-base:
    "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI",
    system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-family-display:
    "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI",
    system-ui, -apple-system, sans-serif;
  --font-family-mono:
    "Cascadia Code", "Cascadia Mono", "Consolas", ui-monospace, monospace;

  /* Weights */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ---- Fluent type ramp (size / line-height / weight) ---- */
  --type-caption-size: 12px;
  --type-caption-line: 16px;

  --type-body-size: 14px;
  --type-body-line: 20px;

  --type-body-large-size: 18px;
  --type-body-large-line: 24px;

  --type-subtitle-size: 20px;
  --type-subtitle-line: 28px;

  --type-title-size: 28px;
  --type-title-line: 36px;

  --type-title-large-size: 40px;
  --type-title-large-line: 52px;

  --type-display-size: 68px;
  --type-display-line: 92px;
}

/* ---- Type ramp utility classes ---- */
.fluent-caption {
  font-family: var(--font-family-base);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  font-weight: var(--font-weight-regular);
}
.fluent-body {
  font-family: var(--font-family-base);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  font-weight: var(--font-weight-regular);
}
.fluent-body-strong {
  font-family: var(--font-family-base);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  font-weight: var(--font-weight-semibold);
}
.fluent-body-large {
  font-family: var(--font-family-base);
  font-size: var(--type-body-large-size);
  line-height: var(--type-body-large-line);
  font-weight: var(--font-weight-regular);
}
.fluent-subtitle {
  font-family: var(--font-family-display);
  font-size: var(--type-subtitle-size);
  line-height: var(--type-subtitle-line);
  font-weight: var(--font-weight-semibold);
}
.fluent-title {
  font-family: var(--font-family-display);
  font-size: var(--type-title-size);
  line-height: var(--type-title-line);
  font-weight: var(--font-weight-semibold);
}
.fluent-title-large {
  font-family: var(--font-family-display);
  font-size: var(--type-title-large-size);
  line-height: var(--type-title-large-line);
  font-weight: var(--font-weight-semibold);
}
.fluent-display {
  font-family: var(--font-family-display);
  font-size: var(--type-display-size);
  line-height: var(--type-display-line);
  font-weight: var(--font-weight-semibold);
}