/* ============================================================
   Runway — design tokens
   GENERATED FILE. Do not edit.
   Every value here is authored in tokens/. Change it there and
   run `npm run build`.
   ============================================================ */


:root {

  /* ---- colour ---- */

  /* brand — The six official Runway colours. */
  --brand-runway-green: #0C8877;  /* Primary. */
  --brand-runway-green-rgb: 12, 136, 119;
  --brand-runway-green-cmyk: "100.0.60.13";
  --brand-runway-green-pantone: "PMS 327 C";
  --brand-aqua: #49F5D9;  /* Cool accent. */
  --brand-aqua-rgb: 73, 245, 217;
  --brand-aqua-cmyk: "56.0.34.0";
  --brand-dark-green: #1C3720;  /* Grounded depth. */
  --brand-dark-green-rgb: 28, 55, 32;
  --brand-dark-green-cmyk: "84.50.84.64";
  --brand-grey: #F6F6F6;  /* Soft neutral. */
  --brand-grey-rgb: 246, 246, 246;
  --brand-grey-cmyk: "4.3.4.0";
  --brand-white: #FFFFFF;  /* Soft neutral. */
  --brand-white-rgb: 255, 255, 255;
  --brand-white-cmyk: "0.0.0.0";
  --brand-bright-green: #2DFE8E;  /* Energy and momentum. */
  --brand-bright-green-rgb: 45, 254, 142;
  --brand-bright-green-cmyk: "66.0.69.0";

  /* ui — NOT BRAND COLOURS. */
  --ui-ink: #11120B;  /* Body and heading text on light surfaces. */
  --ui-ink-rgb: 17, 18, 11;
  --ui-ink-muted: #6B6F6A;  /* Secondary text, captions, mono micro-labels on light. */
  --ui-ink-muted-rgb: 107, 111, 106;
  --ui-ink-document: #33372F;  /* Body copy inside the A4 document system. */
  --ui-ink-document-rgb: 51, 55, 47;
  --ui-border: #E9E9E9;  /* Hairline rules and card outlines on light surfaces. */
  --ui-border-rgb: 233, 233, 233;
  --ui-border-strong: #C9C9C9;  /* Form control outlines, where a hairline is too faint to signal an input. */
  --ui-border-strong-rgb: 201, 201, 201;
  --ui-green-press: #0A6F61;  /* Pressed/active state for Runway Green surfaces. */
  --ui-green-press-rgb: 10, 111, 97;
  --ui-green-deep: #00433F;  /* Deepest teal. */
  --ui-green-deep-rgb: 0, 67, 63;
  --ui-mint: #9DFFB1;  /* Pale mint soft fill, for low-emphasis pills and diagram nodes. */
  --ui-mint-rgb: 157, 255, 177;
  --ui-black: #000000;  /* True black. */
  --ui-black-rgb: 0, 0, 0;

  /* color — Semantic roles. */
  --color-surface: #FFFFFF;  /* Default page and card surface. */
  --color-surface-muted: #F6F6F6;  /* Recessed surface; section banding. */
  --color-surface-deep: #1C3720;  /* Full-bleed dark surface for openers and statements. */
  --color-primary: #0C8877;  /* Primary actions and brand-owned surfaces. */
  --color-primary-press: #0A6F61;  /* Primary surface while pressed. */
  --color-accent: #2DFE8E;  /* High-energy accent: CTAs, the tagline capsule, highlighted words. */
  --color-accent-cool: #49F5D9;  /* Cool accent for gradient highlights and data marks. */
  --color-text: #11120B;  /* Default body and heading text on light. */
  --color-text-muted: #6B6F6A;  /* Secondary text and micro-labels. */
  --color-text-inverse: #FFFFFF;  /* Text on dark, brand or gradient surfaces. */
  --color-text-brand: #0C8877;  /* Text carrying brand emphasis on light. */
  --color-text-document: #33372F;  /* Long-form body copy in A4 documents. */
  --color-on-primary: #FFFFFF;  /* Foreground on Runway Green. */
  --color-on-accent: #1C3720;  /* Foreground on Bright Green. */
  --color-on-accent-cool: #1C3720;  /* Foreground on Aqua. */
  --color-border: #E9E9E9;  /* Hairline rules and card outlines. */
  --color-border-strong: #C9C9C9;  /* Form control outlines. */
  --color-focus-ring: #0C8877;  /* Focus indicator colour. */

  /* ---- elevation ---- */

  /* shadow */
  --shadow-sm: 0 1px 2px rgba(17, 18, 11, 0.06);  /* Barely-there lift. */
  --shadow-md: 0 6px 24px rgba(17, 18, 11, 0.08);  /* The raised card. */
  --shadow-lg: 0 18px 48px rgba(17, 18, 11, 0.12);  /* Floating panels, modals, and the on-screen preview of an A4 page. */
  --shadow-chip-inset: inset 0 3px 6px rgba(255, 255, 255, 0.25);  /* The signature inset highlight on Bright Green capsules. */
  --shadow-focus-ring: 0 0 0 4px rgba(12, 136, 119, 0.16);  /* Keyboard focus indicator. */

  /* ---- motion ---- */

  /* ease */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);  /* Default easing for state changes: hover, press, colour shifts. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);  /* Entrances. */

  /* duration */
  --duration-fast: 120ms;  /* Press feedback. */
  --duration-base: 200ms;  /* Default transition. */
  --duration-slow: 360ms;  /* Entrances and layout shifts. */

  /* ---- radius ---- */

  /* radius */
  --radius-sm: 8px;  /* Small chips, inline code, tight thumbnails. */
  --radius-md: 14px;  /* Default surface radius: form controls, small cards, diagram nodes. */
  --radius-lg: 24px;  /* Cards and content panels. */
  --radius-xl: 32px;  /* Large feature panels and full-bleed graphic surfaces. */
  --radius-pill: 999px;  /* The signature shape. */

  /* ---- spacing ---- */

  /* space — 4pt base scale. */
  --space-1: 4px;  /* Hairline gaps; icon-to-label nudges. */
  --space-2: 8px;  /* Tight internal padding; inline gaps. */
  --space-3: 12px;  /* Compact control padding. */
  --space-4: 16px;  /* Default internal padding. */
  --space-5: 24px;  /* Comfortable padding; gaps between related items. */
  --space-6: 32px;  /* Card padding; gaps between groups. */
  --space-7: 48px;  /* Panel padding; small section spacing. */
  --space-8: 64px;  /* Section spacing. */
  --space-9: 96px;  /* Major section spacing. */
  --space-10: 128px;  /* Full-bleed section spacing; hero breathing room. */

  /* page — Page and slide margins. */
  --page-margin: 50px;  /* Slide and wide-canvas margin (≈50px at 1920). */
  --page-margin-doc: 64px;  /* A4 document side margin at 96dpi. */

  /* control — Interactive control heights. */
  --control-sm: 36px;  /* Compact controls in dense layouts and toolbars. */
  --control-md: 46px;  /* Default control height. */
  --control-lg: 56px;  /* Prominent controls: hero calls to action. */

  /* size — Fixed physical dimensions that are not free design choices. */
  --size-doc-width: 794px;  /* A4 page width at 96dpi. */
  --size-doc-height: 1123px;  /* A4 page height at 96dpi. */
  --size-logo-min: 30px;  /* Minimum reproduced logo width. */

  /* border — Stroke widths. */
  --border-hairline: 1px;  /* Card outlines, table rules, dividers. */
  --border-strong: 1.5px;  /* Form controls and pill button outlines, where a hairline reads as decoration rather than an edge. */
  --border-icon: 2px;  /* Icon stroke width. */

  /* ---- typography ---- */

  /* font — Families. */
  --font-display: "Gelasio", Georgia, "Times New Roman", serif;  /* Gelasio. */
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;  /* Geist. */
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;  /* Geist Mono. */

  /* weight — Only Regular is licensed and shipped. */
  --weight-regular: 400;  /* The only weight. */

  /* text — Screen size scale, in px. */
  --text-display-xl: 120px;  /* Hero serif statements. */
  --text-display-l: 80px;  /* Section openers. */
  --text-display-m: 56px;  /* Large display and headline statistics. */
  --text-h1: 44px;  /* Page headings. */
  --text-h2: 36px;  /* Section headings and manifesto-scale copy. */
  --text-h3: 28px;  /* Sub-section headings. */
  --text-title: 22px;  /* Card titles and navigation. */
  --text-body-l: 20px;  /* Lead paragraphs and large controls. */
  --text-body: 16px;  /* Default body copy. */
  --text-small: 14px;  /* Captions, hints, compact controls. */
  --text-label: 12px;  /* Mono micro-labels, eyebrows, badges. */

  /* text-doc — A4 document scale, in px at 96dpi. */
  --text-doc-micro: 10px;  /* Table column headings. */
  --text-doc-runner: 10.5px;  /* Running header and footer. */
  --text-doc-label: 11px;  /* Document eyebrows and section markers. */
  --text-doc-body: 12.5px;  /* Long-form body copy. */
  --text-doc-key: 13px;  /* Bullet keys and labelled row terms. */
  --text-doc-lede: 15px;  /* Opening paragraph on a body page. */
  --text-doc-contents: 16px;  /* Table-of-contents entries. */
  --text-doc-sub: 17px;  /* Sub-headings within a body page. */
  --text-doc-heading: 34px;  /* Section heading on a body page. */
  --text-doc-cover: 50px;  /* Document cover title. */
  --text-doc-display: 62px;  /* Full-page statement and large document figures. */

  /* leading — Line height, unitless. */
  --leading-display: 1;  /* Gelasio at display scale. */
  --leading-tight: 0.97;  /* Geist and Geist Mono at heading and label scale. */
  --leading-prose: 1.45;  /* Multi-line running body copy on screen. */
  --leading-prose-doc: 1.55;  /* Multi-line body copy in A4 documents, which run looser than screen prose at a smaller size. */

  /* tracking — Letter spacing. */
  --tracking-display: -0.01em;  /* Gelasio. */
  --tracking-sans: 0em;  /* Geist. */
  --tracking-mono: 0.05em;  /* Geist Mono. */
}