/* ST Holding Global — generated from tokens.json by scripts/build_css.py; do not edit */
:root, [data-theme="light"] {
  --paper: #ece8e3; /* Greige background for pages and slides: a very light étoupe, never yellow. */
  --surface: #f7f5f2; /* Warm white for cards, documents and panels. Sits on paper. */
  --tint: #e2ddd6; /* Quiet neutral fill: table header rows, inactive tags. Never for text. */
  --line: #d6cfc7; /* Hairline rules and card borders, 1px. */
  --ink: #24201d; /* Headings and body text on paper, surface and tint (12:1 or more). */
  --ink-muted: #5c564f; /* Captions, sources, metadata on paper and surface (5.9:1 light, 8:1 dark). */
  --wine: #5a1f1b; /* The brand colour: oxblood, a warm brown-red. Title slides, website hero band, LinkedIn banners, primary buttons. Text on it uses on-wine; accents on it use rose. */
  --wine-deep: #3a120f; /* Deepest oxblood: statement slides and footers. Text on it uses on-wine. */
  --cypress: #2c4a3e; /* The second brand field: deep green (inspired by Hermès Vert Cypress). Section slides, footers, a second band, LinkedIn variants. Text on it uses on-wine; accents use sage and sage-rule, never rose. Never small text on light grounds (use cypress-text). */
  --on-wine: #f3eee8; /* Cream: headlines, body text and rules on wine, wine-deep and cypress (7:1 or more). */
  --on-wine-muted: #d6ccc2; /* Warm greige for secondary text and eyebrows on wine, wine-deep and cypress (6:1 or more). */
  --rose: #c98a97; /* Dusty rose, oxblood's accent. On oxblood: eyebrows, thin rules, one key phrase (4.6:1). It is also the raised bar of the ST mark, including where that bar crosses the cypress half of the split tile; elsewhere never on cypress. Never a large fill. */
  --rose-text: #9a4a5c; /* Rose for eyebrows, labels and one key phrase on paper and surface (4.9:1 light, 11:1 dark). */
  --sage: #b7cbbe; /* Cypress's own accent: eyebrows, small labels and one key word on cypress only (5.7:1 light, 5.2:1 dark). Never on oxblood, never on light grounds. */
  --sage-rule: #a3bfad; /* Thin rules and small marks on cypress only (4.9:1 light, 4.4:1 dark). */
  --sage-deep: #7fa18d; /* The raised bar of the frameless cypress logo on light grounds, where sage would vanish. Logo only. */
  --cypress-text: #2c4a3e; /* Green for text on paper and surface: links, the highlighted number on a slide, secondary button outlines (8:1 light, 7.8:1 dark). */
  --etoupe: #8c8279; /* Warm grey-taupe (inspired by Hermès Étoupe). Chart neutrals, dividers, quiet marks. Not for small text. */
  --positive: var(--cypress-text); /* Status only: on track. Always with the words. */
  --critical: #b3401f; /* Status only: at risk. Always with the words; it sits near oxblood. */
  --focus: #5a1f1b; /* 2px focus ring, offset 2px, on every light surface. */
  --shadow-none: none; /* Default. Separate with line, not shadow. */
  --shadow-lift: 0 1px 2px rgba(36, 22, 27, 0.08), 0 8px 24px rgba(36, 22, 27, 0.06); /* Only for menus and dialogs that float above content. */
}
[data-theme="dark"] {
  --paper: #171513;
  --surface: #211e1b;
  --tint: #2a2623;
  --line: #3a3530;
  --ink: #f0ece7;
  --ink-muted: #bdb5ad;
  --wine: #6b2620;
  --wine-deep: #120807;
  --cypress: #2f5245;
  --on-wine: #f3eee8;
  --on-wine-muted: #d6ccc2;
  --rose: #d79aa7;
  --rose-text: #e8bcc6;
  --sage: #b7cbbe;
  --sage-rule: #a3bfad;
  --sage-deep: #7fa18d;
  --cypress-text: #86b49e;
  --etoupe: #9a8f85;
  --positive: var(--cypress-text);
  --critical: #f08a6b;
  --focus: #e8bcc6;
  --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #171513;
    --surface: #211e1b;
    --tint: #2a2623;
    --line: #3a3530;
    --ink: #f0ece7;
    --ink-muted: #bdb5ad;
    --wine: #6b2620;
    --wine-deep: #120807;
    --cypress: #2f5245;
    --on-wine: #f3eee8;
    --on-wine-muted: #d6ccc2;
    --rose: #d79aa7;
    --rose-text: #e8bcc6;
    --sage: #b7cbbe;
    --sage-rule: #a3bfad;
    --sage-deep: #7fa18d;
    --cypress-text: #86b49e;
    --etoupe: #9a8f85;
    --positive: var(--cypress-text);
    --critical: #f08a6b;
    --focus: #e8bcc6;
    --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
  }
}
:root {
  --space-1: 4px; /* Icon to label, tight inline gaps. */
  --space-2: 8px; /* Between a label and its title; table cell padding (vertical). */
  --space-3: 16px; /* Card padding on small screens; gaps between list items. */
  --space-4: 24px; /* Card padding; gaps between cards. */
  --space-5: 40px; /* Between blocks inside a section. */
  --space-6: 64px; /* Between website sections; slide inner margin at 960 wide (128px at 1920). */
  --radius-s: 4px; /* Tags, inputs, tables. */
  --radius-m: 8px; /* Buttons, cards, the ST mark at small sizes. */
  --radius-l: 12px; /* The ST mark (12px per 96px of mark), image frames. */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-sans: "DM Sans", Arial, Helvetica, sans-serif;
  --font-mono: "Space Mono", "Courier New", monospace;
  --text-display-xl: 600 64px/66px var(--font-display); /* Title slides, website hero. One per page. */
  --text-display-l: 600 44px/50px var(--font-display); /* Slide titles, website section titles, document title. */
  --text-heading: 600 28px/34px var(--font-display); /* Document headings, card titles. */
  --text-figure: 600 56px/58px var(--font-display); /* Big numbers on slides, reports and posts. */
  --text-subheading: 500 20px/28px var(--font-sans); /* Lead paragraphs and subheads under a display title. */
  --text-body: 400 16px/26px var(--font-sans); /* Running text on the web and in documents (11pt in Word). */
  --text-body-s: 400 14px/22px var(--font-sans); /* Captions, footnotes, sources, table cells. */
  --text-label: 400 12px/16px var(--font-mono); /* Eyebrows above titles, uppercase: rose-text on paper, rose on oxblood, sage on cypress. */
  --text-data: 400 13px/20px var(--font-mono); /* Figures in tables and chart labels. */
}
.display-xl {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 66px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.display-l {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 50px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.heading {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 34px;
  font-weight: 600;
  letter-spacing: 0;
}
.figure {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 58px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.subheading {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  letter-spacing: 0;
}
.body-s {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.08em;
}
.data {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}