/* Subtle Gradient — Typography tokens
   One family (Inter). Thin display weights + negative tracking are the signature.
   ss01 is on globally; tnum is applied per-element on numeric cells.
   All type-scale tokens are marked @kind font so they group under Type. */
:root {
  /* families & weights */
  --font-sans: "Inter", "InterVariable", system-ui, -apple-system, "SF Pro Display", sans-serif;
  --fw-light: 300;      /* @kind font */ /* the brand display weight — never exceed on display tiers */
  --fw-regular: 400;    /* @kind font */ /* buttons, eyebrows, captions */
  --fw-medium: 500;     /* @kind font */
  --fw-semibold: 600;   /* @kind font */

  /* opentype features */
  --feat-default: "ss01" 1;   /* @kind font */ /* stylistic set — on globally */
  --feat-tabular: "tnum" 1;   /* @kind font */ /* tabular figures — money / numeric cells */

  /* ---- display tier (weight 300, negative tracking) ---- */
  --fs-display-xxl: 56px;   /* @kind font */
  --lh-display-xxl: 1.03;   /* @kind font */
  --ls-display-xxl: -1.4px; /* @kind font */
  --fs-display-xl: 48px;    /* @kind font */
  --lh-display-xl: 1.15;    /* @kind font */
  --ls-display-xl: -0.96px; /* @kind font */
  --fs-display-lg: 32px;    /* @kind font */
  --lh-display-lg: 1.1;     /* @kind font */
  --ls-display-lg: -0.64px; /* @kind font */
  --fs-display-md: 26px;    /* @kind font */
  --lh-display-md: 1.12;    /* @kind font */
  --ls-display-md: -0.26px; /* @kind font */

  /* ---- headings (weight 300) ---- */
  --fs-heading-lg: 22px;    /* @kind font */
  --lh-heading-lg: 1.1;     /* @kind font */
  --ls-heading-lg: -0.22px; /* @kind font */
  --fs-heading-md: 20px;    /* @kind font */
  --lh-heading-md: 1.4;     /* @kind font */
  --ls-heading-md: -0.2px;  /* @kind font */
  --fs-heading-sm: 18px;    /* @kind font */
  --lh-heading-sm: 1.4;     /* @kind font */
  --ls-heading-sm: 0;       /* @kind font */

  /* ---- body (weight 300) ---- */
  --fs-body-lg: 16px;       /* @kind font */
  --lh-body-lg: 1.4;        /* @kind font */
  --ls-body-lg: 0;          /* @kind font */
  --fs-body-md: 15px;       /* @kind font */
  --lh-body-md: 1.4;        /* @kind font */
  --ls-body-md: 0;          /* @kind font */
  --fs-body-tabular: 14px;  /* @kind font */
  --lh-body-tabular: 1.4;   /* @kind font */
  --ls-body-tabular: -0.42px; /* @kind font */

  /* ---- ui / support ---- */
  --fs-button-md: 16px;     /* @kind font */
  --lh-button-md: 1.0;      /* @kind font */
  --ls-button-md: 0;        /* @kind font */
  --fs-button-sm: 14px;     /* @kind font */
  --lh-button-sm: 1.0;      /* @kind font */
  --ls-button-sm: 0;        /* @kind font */
  --fs-caption: 13px;       /* @kind font */
  --lh-caption: 1.4;        /* @kind font */
  --ls-caption: -0.39px;    /* @kind font */
  --fs-micro: 11px;         /* @kind font */
  --lh-micro: 1.4;          /* @kind font */
  --ls-micro: 0;            /* @kind font */
  --fs-micro-cap: 10px;     /* @kind font */
  --lh-micro-cap: 1.15;     /* @kind font */
  --ls-micro-cap: 0.1px;    /* @kind font */
}

/* Optional convenience type utilities — components use the raw vars via inline style,
   but cards / kits / consumers can reach for these. */
.sg-display-xxl { font: var(--fw-light) var(--fs-display-xxl)/var(--lh-display-xxl) var(--font-sans); letter-spacing: var(--ls-display-xxl); }
.sg-display-xl  { font: var(--fw-light) var(--fs-display-xl)/var(--lh-display-xl) var(--font-sans);  letter-spacing: var(--ls-display-xl); }
.sg-display-lg  { font: var(--fw-light) var(--fs-display-lg)/var(--lh-display-lg) var(--font-sans);  letter-spacing: var(--ls-display-lg); }
.sg-display-md  { font: var(--fw-light) var(--fs-display-md)/var(--lh-display-md) var(--font-sans);  letter-spacing: var(--ls-display-md); }
.sg-heading-lg  { font: var(--fw-light) var(--fs-heading-lg)/var(--lh-heading-lg) var(--font-sans);  letter-spacing: var(--ls-heading-lg); }
.sg-heading-md  { font: var(--fw-light) var(--fs-heading-md)/var(--lh-heading-md) var(--font-sans);  letter-spacing: var(--ls-heading-md); }
.sg-body-lg     { font: var(--fw-light) var(--fs-body-lg)/var(--lh-body-lg) var(--font-sans); }
.sg-body-md     { font: var(--fw-light) var(--fs-body-md)/var(--lh-body-md) var(--font-sans); }
.sg-body-tabular{ font: var(--fw-light) var(--fs-body-tabular)/var(--lh-body-tabular) var(--font-sans); letter-spacing: var(--ls-body-tabular); font-feature-settings: var(--feat-tabular); }
.sg-caption     { font: var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font-sans); letter-spacing: var(--ls-caption); color: var(--text-muted); }
.sg-micro-cap   { font: var(--fw-regular) var(--fs-micro-cap)/var(--lh-micro-cap) var(--font-sans); letter-spacing: var(--ls-micro-cap); text-transform: uppercase; }
.sg-tabular     { font-feature-settings: var(--feat-tabular); }