@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@600;700;800&family=Roboto:wght@400;500;600;700;800&family=Roboto+Mono:wght@400;500&display=swap');

/* Typography tokens, shared by every page. Modeled on Atlassian's type
   foundations (atlassian.design/foundations/typography): text picks a role
   - heading, body, metric, code or breadcrumb - and a size within it,
   never a raw font-size.

   Two tiers, like the spacing tokens in styles.css:
   - Reference: the font families and the size scale. Redefining a step
     (what 400 equals) moves every role assigned to it.
   - Roles: one group per text style, each pointing at a family and a size
     step plus its own weight, line height and tracking. This is what
     components use, and what the browser editor's Tokens panel edits.

   Stylesheets apply a role through its tokens (.cs-hero h1 uses
   --font-heading-xxlarge-*). Markup can apply one directly with the
   matching .type-<role> class, which is what the editor's Style menu
   writes. */
:root {
  /* ==== Font families ==== */
  --font-family-heading: Raleway, "Raleway Placeholder", sans-serif;
  --font-family-body: Roboto, "Roboto Placeholder", sans-serif;
  --font-family-code: "Roboto Mono", ui-monospace, Menlo, monospace;
  /* System monospace for small annotation chips (redlines, selection
     labels, key caps) - reads as "tool UI" rather than a code sample. */
  --font-family-annotation: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ==== Size scale ==== */
  --font-size-050: 10px;
  --font-size-075: 11px;
  --font-size-100: 13px;
  --font-size-200: 14px;
  --font-size-300: 15px;
  --font-size-400: 16px;
  --font-size-500: 17px;
  --font-size-600: 18px;
  --font-size-700: 19px;
  --font-size-800: 20px;
  --font-size-900: 22px;
  --font-size-1000: 24px;
  --font-size-1100: 30px;
  --font-size-1200: 32px;
  --font-size-1300: 34px;

  /* ==== Glyph-only controls (the x in a close button) ====
     Not a text role: keeps the glyph box equal to its font size so the
     button can centre it. */
  --line-height-icon: 1;

  /* ==== Heading XXL - page title ==== */
  --font-heading-xxlarge-family: var(--font-family-heading);
  --font-heading-xxlarge-size: var(--font-size-1300);
  --font-heading-xxlarge-weight: 800;
  --font-heading-xxlarge-line-height: 1.25;
  --font-heading-xxlarge-tracking: -0.3px;

  /* ==== Heading XL - section title ==== */
  --font-heading-xlarge-family: var(--font-family-heading);
  --font-heading-xlarge-size: var(--font-size-1100);
  --font-heading-xlarge-weight: 800;
  --font-heading-xlarge-line-height: 1.25;
  --font-heading-xlarge-tracking: -0.2px;

  /* ==== Heading L ==== */
  --font-heading-large-family: var(--font-family-heading);
  --font-heading-large-size: var(--font-size-900);
  --font-heading-large-weight: 700;
  --font-heading-large-line-height: 1.3;
  --font-heading-large-tracking: 0px;

  /* ==== Heading M - card title ==== */
  --font-heading-medium-family: var(--font-family-heading);
  --font-heading-medium-size: var(--font-size-800);
  --font-heading-medium-weight: 600;
  --font-heading-medium-line-height: 1.35;
  --font-heading-medium-tracking: 0px;

  /* ==== Heading S - takeaway ==== */
  --font-heading-small-family: var(--font-family-heading);
  --font-heading-small-size: var(--font-size-600);
  --font-heading-small-weight: 700;
  --font-heading-small-line-height: 1.3;
  --font-heading-small-tracking: 0px;

  /* ==== Heading XS - block title ==== */
  --font-heading-xsmall-family: var(--font-family-heading);
  --font-heading-xsmall-size: var(--font-size-500);
  --font-heading-xsmall-weight: 700;
  --font-heading-xsmall-line-height: 1.3;
  --font-heading-xsmall-tracking: 0px;

  /* ==== Heading XXS - eyebrow ==== */
  --font-heading-xxsmall-family: var(--font-family-heading);
  --font-heading-xxsmall-size: var(--font-size-300);
  --font-heading-xxsmall-weight: 600;
  --font-heading-xxsmall-line-height: 1.3;
  --font-heading-xxsmall-tracking: 0px;

  /* ==== Body L - subtitle ==== */
  --font-body-large-family: var(--font-family-body);
  --font-body-large-size: var(--font-size-700);
  --font-body-large-weight: 400;
  --font-body-large-line-height: 1.5;
  --font-body-large-tracking: 0px;

  /* ==== Body M - paragraph ==== */
  --font-body-medium-family: var(--font-family-body);
  --font-body-medium-size: var(--font-size-400);
  --font-body-medium-weight: 400;
  --font-body-medium-line-height: 1.65;
  --font-body-medium-tracking: 0px;

  /* ==== Body S - block text ==== */
  --font-body-small-family: var(--font-family-body);
  --font-body-small-size: var(--font-size-300);
  --font-body-small-weight: 400;
  --font-body-small-line-height: 1.55;
  --font-body-small-tracking: 0px;

  /* ==== Body XS - caption ==== */
  --font-body-xsmall-family: var(--font-family-body);
  --font-body-xsmall-size: var(--font-size-100);
  --font-body-xsmall-weight: 400;
  --font-body-xsmall-line-height: 1.45;
  --font-body-xsmall-tracking: 0px;

  /* ==== Lead - callouts and highlight statements ==== */
  --font-lead-family: var(--font-family-body);
  --font-lead-size: var(--font-size-500);
  --font-lead-weight: 600;
  --font-lead-line-height: 1.5;
  --font-lead-tracking: 0px;

  /* ==== Body M strong - emphasis in paragraphs ==== */
  --font-body-medium-strong-family: var(--font-family-body);
  --font-body-medium-strong-size: var(--font-size-400);
  --font-body-medium-strong-weight: 600;
  --font-body-medium-strong-line-height: 1.65;
  --font-body-medium-strong-tracking: 0px;

  /* ==== Body S strong - TL;DR and block emphasis ==== */
  --font-body-small-strong-family: var(--font-family-body);
  --font-body-small-strong-size: var(--font-size-300);
  --font-body-small-strong-weight: 600;
  --font-body-small-strong-line-height: 1.55;
  --font-body-small-strong-tracking: 0px;

  /* ==== Body XS strong - active links in small lists ==== */
  --font-body-xsmall-strong-family: var(--font-family-body);
  --font-body-xsmall-strong-size: var(--font-size-100);
  --font-body-xsmall-strong-weight: 600;
  --font-body-xsmall-strong-line-height: 1.45;
  --font-body-xsmall-strong-tracking: 0px;

  /* ==== Metric L - stat ==== */
  --font-metric-large-family: var(--font-family-body);
  --font-metric-large-size: var(--font-size-1200);
  --font-metric-large-weight: 800;
  --font-metric-large-line-height: 1.1;
  --font-metric-large-tracking: -0.5px;

  /* ==== Metric M ==== */
  --font-metric-medium-family: var(--font-family-body);
  --font-metric-medium-size: var(--font-size-900);
  --font-metric-medium-weight: 800;
  --font-metric-medium-line-height: 1.2;
  --font-metric-medium-tracking: -0.3px;

  /* ==== Metric S - fact value ==== */
  --font-metric-small-family: var(--font-family-body);
  --font-metric-small-size: var(--font-size-300);
  --font-metric-small-weight: 600;
  --font-metric-small-line-height: 1.4;
  --font-metric-small-tracking: 0px;

  /* ==== Code ==== */
  --font-code-family: var(--font-family-code);
  --font-code-size: var(--font-size-200);
  --font-code-weight: 400;
  --font-code-line-height: 1.6;
  --font-code-tracking: 0px;

  /* ==== Breadcrumb - section kicker ==== */
  --font-breadcrumb-family: var(--font-family-heading);
  --font-breadcrumb-size: var(--font-size-100);
  --font-breadcrumb-weight: 600;
  --font-breadcrumb-line-height: 1.3;
  --font-breadcrumb-tracking: 0.78px;

  /* ==== Label - UI controls (nav, tabs, buttons) ==== */
  --font-label-family: var(--font-family-body);
  --font-label-size: var(--font-size-100);
  --font-label-weight: 500;
  --font-label-line-height: 1.2;
  --font-label-tracking: 0px;

  /* ==== Label strong - active/selected controls, emphasis ==== */
  --font-label-strong-family: var(--font-family-body);
  --font-label-strong-size: var(--font-size-100);
  --font-label-strong-weight: 600;
  --font-label-strong-line-height: 1.2;
  --font-label-strong-tracking: 0px;

  /* ==== Annotation - mono chips (redlines, selection labels) ==== */
  --font-annotation-family: var(--font-family-annotation);
  --font-annotation-size: var(--font-size-050);
  --font-annotation-weight: 500;
  --font-annotation-line-height: 1;
  --font-annotation-tracking: 0px;

  /* ==== Breadcrumb S - label ==== */
  --font-breadcrumb-small-family: var(--font-family-body);
  --font-breadcrumb-small-size: var(--font-size-050);
  --font-breadcrumb-small-weight: 600;
  --font-breadcrumb-small-line-height: 1.4;
  --font-breadcrumb-small-tracking: 0.4px;
}

/* ---- Role classes ----
   !important on purpose: a role class is an explicit choice made on that
   one element (usually from the editor's Style menu), so it has to win
   over contextual rules like `.cs-section p`, whatever their specificity.
   Color and spacing still come from the context. */
.type-heading-xxlarge { font-family: var(--font-heading-xxlarge-family) !important; font-size: var(--font-heading-xxlarge-size) !important; font-weight: var(--font-heading-xxlarge-weight) !important; line-height: var(--font-heading-xxlarge-line-height) !important; letter-spacing: var(--font-heading-xxlarge-tracking) !important; text-transform: none !important; }
.type-heading-xlarge { font-family: var(--font-heading-xlarge-family) !important; font-size: var(--font-heading-xlarge-size) !important; font-weight: var(--font-heading-xlarge-weight) !important; line-height: var(--font-heading-xlarge-line-height) !important; letter-spacing: var(--font-heading-xlarge-tracking) !important; text-transform: none !important; }
.type-heading-large { font-family: var(--font-heading-large-family) !important; font-size: var(--font-heading-large-size) !important; font-weight: var(--font-heading-large-weight) !important; line-height: var(--font-heading-large-line-height) !important; letter-spacing: var(--font-heading-large-tracking) !important; text-transform: none !important; }
.type-heading-medium { font-family: var(--font-heading-medium-family) !important; font-size: var(--font-heading-medium-size) !important; font-weight: var(--font-heading-medium-weight) !important; line-height: var(--font-heading-medium-line-height) !important; letter-spacing: var(--font-heading-medium-tracking) !important; text-transform: none !important; }
.type-heading-small { font-family: var(--font-heading-small-family) !important; font-size: var(--font-heading-small-size) !important; font-weight: var(--font-heading-small-weight) !important; line-height: var(--font-heading-small-line-height) !important; letter-spacing: var(--font-heading-small-tracking) !important; text-transform: none !important; }
.type-heading-xsmall { font-family: var(--font-heading-xsmall-family) !important; font-size: var(--font-heading-xsmall-size) !important; font-weight: var(--font-heading-xsmall-weight) !important; line-height: var(--font-heading-xsmall-line-height) !important; letter-spacing: var(--font-heading-xsmall-tracking) !important; text-transform: none !important; }
.type-heading-xxsmall { font-family: var(--font-heading-xxsmall-family) !important; font-size: var(--font-heading-xxsmall-size) !important; font-weight: var(--font-heading-xxsmall-weight) !important; line-height: var(--font-heading-xxsmall-line-height) !important; letter-spacing: var(--font-heading-xxsmall-tracking) !important; text-transform: none !important; }
.type-body-large { font-family: var(--font-body-large-family) !important; font-size: var(--font-body-large-size) !important; font-weight: var(--font-body-large-weight) !important; line-height: var(--font-body-large-line-height) !important; letter-spacing: var(--font-body-large-tracking) !important; text-transform: none !important; }
.type-body-medium { font-family: var(--font-body-medium-family) !important; font-size: var(--font-body-medium-size) !important; font-weight: var(--font-body-medium-weight) !important; line-height: var(--font-body-medium-line-height) !important; letter-spacing: var(--font-body-medium-tracking) !important; text-transform: none !important; }
.type-body-small { font-family: var(--font-body-small-family) !important; font-size: var(--font-body-small-size) !important; font-weight: var(--font-body-small-weight) !important; line-height: var(--font-body-small-line-height) !important; letter-spacing: var(--font-body-small-tracking) !important; text-transform: none !important; }
.type-body-xsmall { font-family: var(--font-body-xsmall-family) !important; font-size: var(--font-body-xsmall-size) !important; font-weight: var(--font-body-xsmall-weight) !important; line-height: var(--font-body-xsmall-line-height) !important; letter-spacing: var(--font-body-xsmall-tracking) !important; text-transform: none !important; }
.type-lead { font-family: var(--font-lead-family) !important; font-size: var(--font-lead-size) !important; font-weight: var(--font-lead-weight) !important; line-height: var(--font-lead-line-height) !important; letter-spacing: var(--font-lead-tracking) !important; text-transform: none !important; }
.type-body-medium-strong { font-family: var(--font-body-medium-strong-family) !important; font-size: var(--font-body-medium-strong-size) !important; font-weight: var(--font-body-medium-strong-weight) !important; line-height: var(--font-body-medium-strong-line-height) !important; letter-spacing: var(--font-body-medium-strong-tracking) !important; text-transform: none !important; }
.type-body-small-strong { font-family: var(--font-body-small-strong-family) !important; font-size: var(--font-body-small-strong-size) !important; font-weight: var(--font-body-small-strong-weight) !important; line-height: var(--font-body-small-strong-line-height) !important; letter-spacing: var(--font-body-small-strong-tracking) !important; text-transform: none !important; }
.type-body-xsmall-strong { font-family: var(--font-body-xsmall-strong-family) !important; font-size: var(--font-body-xsmall-strong-size) !important; font-weight: var(--font-body-xsmall-strong-weight) !important; line-height: var(--font-body-xsmall-strong-line-height) !important; letter-spacing: var(--font-body-xsmall-strong-tracking) !important; text-transform: none !important; }
.type-metric-large { font-family: var(--font-metric-large-family) !important; font-size: var(--font-metric-large-size) !important; font-weight: var(--font-metric-large-weight) !important; line-height: var(--font-metric-large-line-height) !important; letter-spacing: var(--font-metric-large-tracking) !important; text-transform: none !important; }
.type-metric-medium { font-family: var(--font-metric-medium-family) !important; font-size: var(--font-metric-medium-size) !important; font-weight: var(--font-metric-medium-weight) !important; line-height: var(--font-metric-medium-line-height) !important; letter-spacing: var(--font-metric-medium-tracking) !important; text-transform: none !important; }
.type-metric-small { font-family: var(--font-metric-small-family) !important; font-size: var(--font-metric-small-size) !important; font-weight: var(--font-metric-small-weight) !important; line-height: var(--font-metric-small-line-height) !important; letter-spacing: var(--font-metric-small-tracking) !important; text-transform: none !important; }
.type-code { font-family: var(--font-code-family) !important; font-size: var(--font-code-size) !important; font-weight: var(--font-code-weight) !important; line-height: var(--font-code-line-height) !important; letter-spacing: var(--font-code-tracking) !important; text-transform: none !important; white-space: pre-wrap; }
.type-label { font-family: var(--font-label-family) !important; font-size: var(--font-label-size) !important; font-weight: var(--font-label-weight) !important; line-height: var(--font-label-line-height) !important; letter-spacing: var(--font-label-tracking) !important; text-transform: none !important; }
.type-label-strong { font-family: var(--font-label-strong-family) !important; font-size: var(--font-label-strong-size) !important; font-weight: var(--font-label-strong-weight) !important; line-height: var(--font-label-strong-line-height) !important; letter-spacing: var(--font-label-strong-tracking) !important; text-transform: none !important; }
.type-annotation { font-family: var(--font-annotation-family) !important; font-size: var(--font-annotation-size) !important; font-weight: var(--font-annotation-weight) !important; line-height: var(--font-annotation-line-height) !important; letter-spacing: var(--font-annotation-tracking) !important; text-transform: none !important; }
.type-breadcrumb { font-family: var(--font-breadcrumb-family) !important; font-size: var(--font-breadcrumb-size) !important; font-weight: var(--font-breadcrumb-weight) !important; line-height: var(--font-breadcrumb-line-height) !important; letter-spacing: var(--font-breadcrumb-tracking) !important; text-transform: uppercase !important; }
.type-breadcrumb-small { font-family: var(--font-breadcrumb-small-family) !important; font-size: var(--font-breadcrumb-small-size) !important; font-weight: var(--font-breadcrumb-small-weight) !important; line-height: var(--font-breadcrumb-small-line-height) !important; letter-spacing: var(--font-breadcrumb-small-tracking) !important; text-transform: uppercase !important; }

/* Code set inline inside other text keeps that text's size. */
:not(.type-code) > code { font-family: var(--font-family-code); font-size: 0.9em; }