/* Semantic typography — desktop scale (mobile scale differs; see tokens).
   Family stacks put the real proprietary face first, Google-Fonts substitute second. */
:root {
  --font-sans: "Grotesk Sans", "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-pf: "Alt Grotesk", "Hanken Grotesk", var(--font-sans);

  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-bold: 700; /* @kind font */

  /* Desktop type scale (px / line-height) */
  --type-heading-xlarge: var(--fw-bold) 48px/48px var(--font-sans);
  --type-heading-large:  var(--fw-bold) 36px/36px var(--font-sans);
  --type-heading-medium: var(--fw-bold) 24px/24px var(--font-sans);
  --type-heading-small:  var(--fw-bold) 20px/24px var(--font-sans);
  --type-body-default:   var(--fw-regular) 16px/24px var(--font-sans);
  --type-body-medium:    var(--fw-regular) 14px/20px var(--font-sans);
  --type-body-small:     var(--fw-regular) 12px/16px var(--font-sans);
  --type-button-default: var(--fw-medium) 16px/24px var(--font-sans);
  --type-button-small:   var(--fw-medium) 14px/14px var(--font-sans);
  --type-caption:        var(--fw-medium) 12px/14px var(--font-sans);
}

/* Specimen utility classes — safe to use in cards & components */
.sq-heading-xlarge { font: var(--type-heading-xlarge); letter-spacing: 0; }
.sq-heading-large  { font: var(--type-heading-large);  letter-spacing: 0; }
.sq-heading-medium { font: var(--type-heading-medium); letter-spacing: 0; }
.sq-heading-small  { font: var(--type-heading-small);  letter-spacing: 0; }
.sq-body-default   { font: var(--type-body-default); }
.sq-body-medium    { font: var(--type-body-medium); }
.sq-body-small     { font: var(--type-body-small); }
.sq-button         { font: var(--type-button-default); }
.sq-caption        { font: var(--type-caption); text-transform: none; }
.sq-mono           { font-family: var(--font-mono); }