/* ============================================================
   BTK Design System — Typography Tokens
   Roboto for body/UI, Roboto Slab for headings (the BTK
   "font.heading" / "font.content" pair). Body default weight is
   light (300); headings are regular (400) with occasional bold.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --btk-font-heading: 'Roboto Slab', Georgia, 'Times New Roman', serif;
  --btk-font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --btk-font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* ---- Weights ---- */
  --btk-weight-light: 300;     /* default body weight */
  --btk-weight-regular: 400;   /* default heading weight */
  --btk-weight-medium: 500;
  --btk-weight-bold: 700;

  /* ---- Line heights ---- */
  --btk-leading-body: 1.62;    /* running text */
  --btk-leading-heading: 1.3;  /* headings + cards */
  --btk-leading-tight: 1.1;

  /* ---- Type scale (px, from the live site) ---- */
  --btk-text-xs: 12px;
  --btk-text-sm: 14px;
  --btk-text-base: 16px;
  --btk-text-md: 18px;       /* card titles */
  --btk-text-lg: 22px;       /* mobile footer heading */
  --btk-text-xl: 24px;       /* footer menu heading */
  --btk-text-2xl: 26px;      /* footer org name */
  --btk-text-3xl: 30px;      /* featured card title */
  --btk-text-display: 44px;  /* hero / banner headline */

  /* ---- Semantic aliases ---- */
  --btk-title-display: var(--btk-weight-regular) var(--btk-text-display) / var(--btk-leading-heading) var(--btk-font-heading);
  --btk-title-section: var(--btk-weight-bold) var(--btk-text-2xl) / var(--btk-leading-heading) var(--btk-font-heading);
  --btk-title-card: var(--btk-weight-regular) var(--btk-text-md) / var(--btk-leading-heading) var(--btk-font-heading);
  --btk-body-default: var(--btk-weight-light) var(--btk-text-base) / var(--btk-leading-body) var(--btk-font-body);
}