/* ──────────────────────────────────────────────────────────────
   Cobalt — Typography
   Roobert (display / titles) + Inter (UI & body). Scale lifted from the
   Figma Typography specimen. Titles are bold Roobert; body is Inter.
   ────────────────────────────────────────────────────────────── */

:root {
  /* Families */
  --cb-font-display: "Roobert", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cb-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cb-font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Weights */
  --cb-w-light:    300;  /* @kind font */
  --cb-w-regular:  400;  /* @kind font */
  --cb-w-medium:   500;  /* @kind font */
  --cb-w-semibold: 600;  /* @kind font */
  --cb-w-bold:     700;  /* @kind font */

  /* Type scale — size / line-height (px)
     Title.* use Roobert bold; Paragraph.* use Inter. */
  --cb-title-header-size: 26px;  --cb-title-header-lh: 32px;  /* page title  */
  --cb-title-lg-size:     22px;  --cb-title-lg-lh:     32px;  /* section title */
  --cb-title-md-size:     18px;  --cb-title-md-lh:     24px;  /* card title */
  --cb-title-sm-size:     16px;  --cb-title-sm-lh:     24px;  /* sub-title */

  --cb-body-lg-size:      16px;  --cb-body-lg-lh:      24px;
  --cb-body-md-size:      14px;  --cb-body-md-lh:      24px;  /* default UI text */
  --cb-body-sm-size:      12px;  --cb-body-sm-lh:      16px;  /* meta / caption */

  --cb-display-size:      56px;  --cb-display-lh:      64px;  /* marketing / hero */
}

/* ---- Reusable text classes (used by specimen cards & kits) ---- */
.cb-title-header { font-family: var(--cb-font-display); font-weight: 700; font-size: var(--cb-title-header-size); line-height: var(--cb-title-header-lh); color: var(--cb-text); letter-spacing: -0.01em; }
.cb-title-lg     { font-family: var(--cb-font-display); font-weight: 700; font-size: var(--cb-title-lg-size);     line-height: var(--cb-title-lg-lh);     color: var(--cb-text); letter-spacing: -0.01em; }
.cb-title-md     { font-family: var(--cb-font-display); font-weight: 700; font-size: var(--cb-title-md-size);     line-height: var(--cb-title-md-lh);     color: var(--cb-text); }
.cb-title-sm     { font-family: var(--cb-font-display); font-weight: 700; font-size: var(--cb-title-sm-size);     line-height: var(--cb-title-sm-lh);     color: var(--cb-text); }

.cb-body-lg      { font-family: var(--cb-font-body); font-weight: 400; font-size: var(--cb-body-lg-size); line-height: var(--cb-body-lg-lh); color: var(--cb-text); }
.cb-body-md      { font-family: var(--cb-font-body); font-weight: 400; font-size: var(--cb-body-md-size); line-height: var(--cb-body-md-lh); color: var(--cb-text); }
.cb-body-sm      { font-family: var(--cb-font-body); font-weight: 400; font-size: var(--cb-body-sm-size); line-height: var(--cb-body-sm-lh); color: var(--cb-text-secondary); }
.cb-strong       { font-weight: 600; }