/* ==========================================================================
   TYPOGRAPHY — IBM Carbon Design System
   --------------------------------------------------------------------------
   Carbon uses IBM Plex. Three families: Sans (UI + product), Serif (editorial
   / expressive quotations), Mono (code & data).

   Weights: Light 300, Regular 400, Medium 500, SemiBold 600.
   The type scale is a 23-step ramp generated by an algorithm; the steps below
   are the ones Carbon's type styles actually use.

   Productive styles = dense product UI (tight line-height).
   Expressive / Fluid styles = marketing & editorial (looser, fluid).
   ========================================================================== */

:root {
  /* ---- Font families ---- */
  --cds-font-sans: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cds-font-serif: 'IBM Plex Serif', Georgia, Times, serif;
  --cds-font-mono: 'IBM Plex Mono', Menlo, 'DejaVu Sans Mono', 'Courier New', monospace;

  /* ---- Font weights ---- */
  --cds-weight-light: 300;
  --cds-weight-regular: 400;
  --cds-weight-medium: 500;
  --cds-weight-semibold: 600;

  /* ---- Type scale steps (rem; 1rem = 16px) ---- */
  --cds-size-01: 0.75rem;   /* 12px */
  --cds-size-02: 0.875rem;  /* 14px */
  --cds-size-03: 1rem;      /* 16px */
  --cds-size-04: 1.125rem;  /* 18px */
  --cds-size-05: 1.25rem;   /* 20px */
  --cds-size-06: 1.5rem;    /* 24px */
  --cds-size-07: 1.75rem;   /* 28px */
  --cds-size-08: 2rem;      /* 32px */
  --cds-size-09: 2.25rem;   /* 36px */
  --cds-size-10: 2.625rem;  /* 42px */
  --cds-size-11: 3rem;      /* 48px */
  --cds-size-12: 3.375rem;  /* 54px */
  --cds-size-13: 3.75rem;   /* 60px */
  --cds-size-15: 4.75rem;   /* 76px */

  /* =====================================================================
     TYPE STYLE TOKENS — each is size / line-height / weight / tracking.
     Use the grouped shorthands or pick individual properties.
     ===================================================================== */

  /* Utility / supporting */
  /* (Each style = size + line-height + letter-spacing/weight. Line-height,
     letter-spacing and weight are typographic ratios, not color/spacing/
     radius/shadow/font values, so they're tagged @kind other.) */
  --cds-caption-01-size: 0.75rem;
  --cds-caption-01-lh: 1.33333; /* @kind other */
  --cds-caption-01-ls: 0.32px;  /* @kind other */
  --cds-label-01-size: 0.75rem;
  --cds-label-01-lh: 1.33333;   /* @kind other */
  --cds-label-01-ls: 0.32px;    /* @kind other */
  --cds-label-02-size: 0.875rem;
  --cds-label-02-lh: 1.28572;   /* @kind other */
  --cds-label-02-ls: 0.16px;    /* @kind other */
  --cds-helper-01-size: 0.75rem;
  --cds-helper-01-lh: 1.33333;  /* @kind other */
  --cds-helper-01-ls: 0.32px;   /* @kind other */

  /* Body */
  --cds-body-01-size: 0.875rem;
  --cds-body-01-lh: 1.42857;    /* @kind other */
  --cds-body-01-ls: 0.16px;     /* @kind other */
  --cds-body-02-size: 1rem;
  --cds-body-02-lh: 1.5;        /* @kind other */
  --cds-body-02-ls: 0;          /* @kind other */
  --cds-body-compact-01-size: 0.875rem;
  --cds-body-compact-01-lh: 1.28572; /* @kind other */
  --cds-body-compact-01-ls: 0.16px;  /* @kind other */
  --cds-body-compact-02-size: 1rem;
  --cds-body-compact-02-lh: 1.375;   /* @kind other */
  --cds-body-compact-02-ls: 0;       /* @kind other */

  /* Code */
  --cds-code-01-size: 0.75rem;
  --cds-code-01-lh: 1.33333;    /* @kind other */
  --cds-code-01-ls: 0.32px;     /* @kind other */
  --cds-code-02-size: 0.875rem;
  --cds-code-02-lh: 1.42857;    /* @kind other */
  --cds-code-02-ls: 0.32px;     /* @kind other */

  /* Fixed headings (productive) */
  --cds-heading-compact-01-size: 0.875rem;
  --cds-heading-compact-01-lh: 1.28572;  /* @kind other */
  --cds-heading-compact-01-weight: 600;  /* @kind other */
  --cds-heading-01-size: 0.875rem;
  --cds-heading-01-lh: 1.42857; /* @kind other */
  --cds-heading-01-weight: 600; /* @kind other */
  --cds-heading-02-size: 1rem;
  --cds-heading-02-lh: 1.5;     /* @kind other */
  --cds-heading-02-weight: 600; /* @kind other */
  --cds-heading-03-size: 1.25rem;
  --cds-heading-03-lh: 1.4;     /* @kind other */
  --cds-heading-03-weight: 400; /* @kind other */
  --cds-heading-04-size: 1.75rem;
  --cds-heading-04-lh: 1.28572; /* @kind other */
  --cds-heading-04-weight: 400; /* @kind other */
  --cds-heading-05-size: 2rem;
  --cds-heading-05-lh: 1.25;    /* @kind other */
  --cds-heading-05-weight: 400; /* @kind other */
  --cds-heading-06-size: 2.625rem;
  --cds-heading-06-lh: 1.199;   /* @kind other */
  --cds-heading-06-weight: 300; /* @kind other */
  --cds-heading-07-size: 3.375rem;
  --cds-heading-07-lh: 1.199;   /* @kind other */
  --cds-heading-07-weight: 300; /* @kind other */

  /* Fluid display (expressive) */
  --cds-display-01-size: 2.625rem;
  --cds-display-01-lh: 1.19;    /* @kind other */
  --cds-display-01-weight: 300; /* @kind other */
  --cds-display-02-size: 2.625rem;
  --cds-display-02-lh: 1.19;    /* @kind other */
  --cds-display-02-weight: 600; /* @kind other */
  --cds-quotation-01-size: 1.25rem;
  --cds-quotation-01-lh: 1.3;   /* @kind other */
  --cds-quotation-01-weight: 400; /* @kind other */
}

/* =====================================================================
   READY-MADE TYPE CLASSES — apply directly for authentic Carbon type.
   ===================================================================== */
.cds-type-caption-01 { font-family: var(--cds-font-sans); font-size: var(--cds-caption-01-size); line-height: var(--cds-caption-01-lh); letter-spacing: var(--cds-caption-01-ls); font-weight: 400; }
.cds-type-label-01 { font-family: var(--cds-font-sans); font-size: var(--cds-label-01-size); line-height: var(--cds-label-01-lh); letter-spacing: var(--cds-label-01-ls); font-weight: 400; }
.cds-type-helper-01 { font-family: var(--cds-font-sans); font-size: var(--cds-helper-01-size); line-height: var(--cds-helper-01-lh); letter-spacing: var(--cds-helper-01-ls); font-weight: 400; }
.cds-type-body-01 { font-family: var(--cds-font-sans); font-size: var(--cds-body-01-size); line-height: var(--cds-body-01-lh); letter-spacing: var(--cds-body-01-ls); font-weight: 400; }
.cds-type-body-02 { font-family: var(--cds-font-sans); font-size: var(--cds-body-02-size); line-height: var(--cds-body-02-lh); letter-spacing: var(--cds-body-02-ls); font-weight: 400; }
.cds-type-body-compact-01 { font-family: var(--cds-font-sans); font-size: var(--cds-body-compact-01-size); line-height: var(--cds-body-compact-01-lh); letter-spacing: var(--cds-body-compact-01-ls); font-weight: 400; }
.cds-type-code-01 { font-family: var(--cds-font-mono); font-size: var(--cds-code-01-size); line-height: var(--cds-code-01-lh); letter-spacing: var(--cds-code-01-ls); font-weight: 400; }
.cds-type-code-02 { font-family: var(--cds-font-mono); font-size: var(--cds-code-02-size); line-height: var(--cds-code-02-lh); letter-spacing: var(--cds-code-02-ls); font-weight: 400; }
.cds-type-heading-compact-01 { font-family: var(--cds-font-sans); font-size: var(--cds-heading-compact-01-size); line-height: var(--cds-heading-compact-01-lh); font-weight: 600; }
.cds-type-heading-01 { font-family: var(--cds-font-sans); font-size: var(--cds-heading-01-size); line-height: var(--cds-heading-01-lh); font-weight: 600; }
.cds-type-heading-02 { font-family: var(--cds-font-sans); font-size: var(--cds-heading-02-size); line-height: var(--cds-heading-02-lh); font-weight: 600; }
.cds-type-heading-03 { font-family: var(--cds-font-sans); font-size: var(--cds-heading-03-size); line-height: var(--cds-heading-03-lh); font-weight: 400; }
.cds-type-heading-04 { font-family: var(--cds-font-sans); font-size: var(--cds-heading-04-size); line-height: var(--cds-heading-04-lh); font-weight: 400; }
.cds-type-heading-05 { font-family: var(--cds-font-sans); font-size: var(--cds-heading-05-size); line-height: var(--cds-heading-05-lh); font-weight: 400; }
.cds-type-heading-06 { font-family: var(--cds-font-sans); font-size: var(--cds-heading-06-size); line-height: var(--cds-heading-06-lh); font-weight: 300; }
.cds-type-heading-07 { font-family: var(--cds-font-sans); font-size: var(--cds-heading-07-size); line-height: var(--cds-heading-07-lh); font-weight: 300; }
.cds-type-display-01 { font-family: var(--cds-font-sans); font-size: var(--cds-display-01-size); line-height: var(--cds-display-01-lh); font-weight: 300; }
.cds-type-display-02 { font-family: var(--cds-font-sans); font-size: var(--cds-display-02-size); line-height: var(--cds-display-02-lh); font-weight: 600; }
.cds-type-quotation-01 { font-family: var(--cds-font-serif); font-size: var(--cds-quotation-01-size); line-height: var(--cds-quotation-01-lh); font-weight: 400; }