/* Short Commerce — typography.
   Plus Jakarta Sans: koppen en lopende tekst. Fustat: ondertitels en intro-regels. Archivo Expanded: ALLEEN logo-lockups.
   The web fonts are linked in base.html, not imported here. Sizes are a role scale (DESIGN.md, Typography); clamp() sizes stay at their call site. */

:root {
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-sub: 'Fustat', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-logo: 'Archivo', system-ui, sans-serif;   /* met --stretch-logo, alleen voor logo-lockups */
  --stretch-logo: 125%;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;   /* data only: ids, domains, links, logs */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  --text-micro: 11px;          /* poster stat labels, row captions, count badges */
  --text-caption: 12px;        /* labels, help text, status chips, table heads */
  --text-small: 13px;          /* field labels, staff notes, small buttons */
  --text-meta: 14px;           /* table cells, pills, target line, nav items */
  --text-meta-lg: 15px;        /* short reading text in chrome, inputs, figure labels */
  --text-body-sm: 16px;        /* dense prose, list names, subtitles */
  --text-block-title: 17px;    /* admin block titles */
  --text-body: 18px;           /* prose, region and drawer titles */
  --text-title-sm: 20px;       /* sub heads, queue client names */
  --text-title: 22px;          /* section subheads, agenda and confirm titles */
  --text-section-title: 28px;  /* admin section titles, platform names */
  --text-page-title: 44px;     /* operate page titles */

  --leading-none: 1;
  --leading-tight: 0.92;
  --leading-snug: 1.05;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  --tracking-hero: -0.035em;
  --tracking-display: -0.03em;
  --tracking-title: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-micro: 0.04em;
  --tracking-label: 0.2em;
}

.sc-display { font-family: var(--font-display); font-weight: var(--weight-black); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); color: var(--text); }
.sc-heading { font-family: var(--font-display); font-weight: var(--weight-bold); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--text); }
.sc-subtitle { font-family: var(--font-sub); font-weight: var(--weight-regular); line-height: var(--leading-normal); color: var(--text-3); }
.sc-body { font-family: var(--font-sans); font-weight: var(--weight-regular); line-height: var(--leading-relaxed); color: var(--text-2); }
.sc-label { font-family: var(--font-sans); font-weight: var(--weight-bold); font-size: var(--text-caption); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-ink); }
.sc-quote { font-family: var(--font-sans); font-style: italic; font-weight: var(--weight-bold); color: var(--accent-ink); }
.sc-logo-type { font-family: var(--font-logo); font-stretch: var(--stretch-logo); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.02em; }