:root {
  /* ---- Font families ---- */
  --font-sans: "Segoe UI", "Segoe UI Web (West European)", "Selawik",
    -apple-system, BlinkMacSystemFont, "Segoe UI Variable", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Mono", "Consolas", "SF Mono", ui-monospace,
    "Roboto Mono", monospace;

  /* ---- Type ramp — deliberately small. Admin-console UI, not marketing type.
     Body copy sits at 13–14px; the single largest size in the whole system
     (page title) is 20px. Nothing in this system should be set larger than
     that without a specific, discussed reason. ---- */
  --font-size-100: 11px;  /* micro / table meta */
  --font-size-200: 12px;  /* caption, helper text, badges */
  --font-size-300: 13px;  /* dense table cells */
  --font-size-400: 14px;  /* body — default UI text */
  --font-size-500: 16px;  /* body-strong / section label */
  --font-size-600: 18px;  /* card / panel title */
  --font-size-700: 20px;  /* page title — the system's ceiling */

  --line-height-100: 14px;
  --line-height-200: 16px;
  --line-height-300: 18px;
  --line-height-400: 20px;
  --line-height-500: 22px;
  --line-height-600: 24px;
  --line-height-700: 28px;

  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ---- Semantic aliases ---- */
  --text-style-micro:        var(--font-size-100) / var(--line-height-100) var(--font-sans);
  --text-style-caption:      var(--font-size-200) / var(--line-height-200) var(--font-sans);
  --text-style-body-dense:   var(--font-size-300) / var(--line-height-300) var(--font-sans);
  --text-style-body:         var(--font-size-400) / var(--line-height-400) var(--font-sans);
  --text-style-body-strong:  var(--font-weight-semibold) var(--font-size-400) / var(--line-height-400) var(--font-sans);
  --text-style-subtitle:     var(--font-weight-semibold) var(--font-size-500) / var(--line-height-500) var(--font-sans);
  --text-style-panel-title:  var(--font-weight-semibold) var(--font-size-600) / var(--line-height-600) var(--font-sans);
  --text-style-page-title:   var(--font-weight-semibold) var(--font-size-700) / var(--line-height-700) var(--font-sans);
}