/* OneTwo Growth Studio tokens, 2026-10-10 draft.
   Generated by build/tokens.py from the same values as tokens/onetwo.json. Do not edit by hand.
   Read DESIGN.md first. Pages read the semantic tier (--ot-text, --ot-ground ...), never the primitives.
   Attributes: data-ot-surface="web|doc|slide" (web is the default), data-ot-density="room" (slides only),
   data-ot-ground="ink|ultramarine". Fonts: tokens/onetwo-fonts.css. Classes: components/onetwo-components.css. */

:root {
  /* primitives: colour (D37 to D40) */
  --ot-color-ink: #1A1A18;
  --ot-color-paper: #F7F6F2;
  --ot-color-grey-3: #3E3C37;
  --ot-color-grey-2: #5A5852;
  --ot-color-grey-1: #8C8981;
  --ot-color-rule: #D9D6CE;
  --ot-color-grid: #E2DFD7;
  --ot-color-ink-rule: #2B2A27;
  --ot-color-ultramarine: #3664DE;
  --ot-color-ultramarine-on-ink: #5679F7;
  --ot-color-on-ultramarine-soft: #B9C6F2;
  --ot-color-on-ultramarine-rule: #5A7FE6;
  --ot-color-umber: #7D6A4F;
  --ot-color-umber-on-ink: #937F63;
  --ot-color-verdigris: #2F7A72;

  /* primitives: type */
  --ot-font-sans: 'Geist', system-ui, sans-serif;
  --ot-font-mono: 'Geist Mono', ui-monospace, monospace;
  --ot-weight-regular: 400;
  --ot-weight-medium: 500;
  --ot-weight-semibold: 600;
  --ot-features-words: "ss05" 1;   /* Geist ss05, the serifed capital I */
  --ot-features-label: "ss09" 1;   /* Geist Mono ss09, the plain zero */

  /* primitives: line weights (px at 1x) */
  --ot-line-hairline: 1px;
  --ot-line-quote-rule: 2px;
  --ot-line-button-outline: 1.5px;
  --ot-line-underline: 1px;
  --ot-line-underline-offset: 3px;
  --ot-line-statement: 2.5px;
  --ot-line-statement-offset: 5px;
  --ot-line-focus: 2px;
  --ot-line-focus-offset: 3px;
  --ot-line-pass: 1.8px;
  --ot-line-run: 1.4px;
  --ot-line-next: 1.2px;
  --ot-line-ring: 1.4px;
  --ot-line-part-circle: 1.1px;
  --ot-line-goal: 3.5px;
  --ot-line-field-grid: 1.0px;
  --ot-line-tile: 1.5px;
  --ot-line-icon: 1.6px;
  --ot-dash-run: 5 5;
  --ot-dash-next: 1.5 4;
  --ot-radius: 0;
  --ot-button-height: 48px;
  --ot-button-pad-x: 24px;

  /* primitives: motion (D50; HTML drawings and charts only) */
  --ot-ease: cubic-bezier(0.4, 0.1, 0.3, 1);
  --ot-duration-fade: 120ms;
  --ot-duration-gap: 100ms;
  --ot-duration-axis: 450ms;
  --ot-duration-bar: 700ms;
  --ot-duration-stagger: 50ms;
  --ot-duration-stroke-min: 300ms;
  --ot-duration-stroke-max: 1200ms;
  --ot-duration-line: 1400ms;   /* a whole line chart, plotted at constant speed */

  /* the lockup (D46): the tight file's height is the type size x this; set height: calc(var(--ot-lockup-type) * var(--ot-lockup-ratio)) */
  --ot-lockup-ratio: 1.2708;

  /* layout */
  --ot-slide-width: 1920px; --ot-slide-height: 1080px; --ot-slide-margin-x: 96px; --ot-slide-margin-top: 84px; --ot-slide-margin-bottom: 108px;
  --ot-slide-columns: 12; --ot-slide-column: 122px; --ot-slide-gutter: 24px; --ot-slide-footer-rule: 972px;
  --ot-doc-width: 816px; --ot-doc-height: 1056px; --ot-doc-margin-x: 72px; --ot-doc-margin-top: 80px; --ot-doc-margin-bottom: 56px;
  --ot-doc-side: 192px; --ot-doc-gutter: 24px; --ot-doc-text-x: 288px; --ot-doc-text: 456px;
  --ot-web-page: 1440px;
  --ot-web-content: 1200px;
  --ot-web-columns: 12;
  --ot-web-gutter: 24px;
  --ot-web-column: 78px;
  --ot-web-margin: clamp(24px, 8.333vw, 120px);
}

:root,
[data-ot-ground="paper"] {
  /* semantic: colour on paper (the default) */
  --ot-ground: var(--ot-color-paper);
  --ot-text: var(--ot-color-ink);
  --ot-text-body: var(--ot-color-grey-3);
  --ot-text-secondary: var(--ot-color-grey-2);
  --ot-text-quiet: var(--ot-color-grey-1);
  --ot-rule: var(--ot-color-rule);
  --ot-rule-strong: var(--ot-color-ink);
  --ot-underline: var(--ot-color-grey-1);
  --ot-grid: var(--ot-color-grid);
  --ot-lead: var(--ot-color-ultramarine);
  --ot-focus: var(--ot-color-ultramarine);
  --ot-earth: var(--ot-color-umber);
  --ot-action-hover: var(--ot-color-grey-3);
  --ot-action-hover-text: var(--ot-color-paper);
  --ot-second-hover: var(--ot-color-grey-3);
  --ot-second-hover-fill: transparent;
  --ot-mark: var(--ot-color-ink);
  color-scheme: light;
}

[data-ot-ground="ink"] {
  /* semantic: colour on an ink ground */
  --ot-ground: var(--ot-color-ink);
  --ot-text: var(--ot-color-paper);
  --ot-text-body: var(--ot-color-paper);
  --ot-text-secondary: var(--ot-color-grey-1);
  --ot-text-quiet: var(--ot-color-grey-1);
  --ot-rule: var(--ot-color-ink-rule);
  --ot-rule-strong: var(--ot-color-paper);
  --ot-underline: var(--ot-color-grey-1);
  --ot-grid: var(--ot-color-ink-rule);
  --ot-lead: var(--ot-color-ultramarine-on-ink);
  --ot-focus: var(--ot-color-ultramarine-on-ink);
  --ot-earth: var(--ot-color-umber-on-ink);
  --ot-action-hover: var(--ot-color-grid);
  --ot-action-hover-text: var(--ot-color-ink);
  --ot-second-hover: var(--ot-color-grid);
  --ot-second-hover-fill: transparent;
  --ot-mark: var(--ot-color-paper);
  color-scheme: dark;
}

[data-ot-ground="ultramarine"] {
  /* semantic: the rare ultramarine ground, everything paper */
  --ot-ground: var(--ot-color-ultramarine);
  --ot-text: var(--ot-color-paper);
  --ot-text-body: var(--ot-color-paper);
  --ot-text-secondary: var(--ot-color-paper);
  --ot-text-quiet: var(--ot-color-paper);
  --ot-rule: var(--ot-color-on-ultramarine-rule);
  --ot-rule-strong: var(--ot-color-paper);
  --ot-underline: var(--ot-color-on-ultramarine-soft);
  --ot-grid: var(--ot-color-on-ultramarine-rule);
  --ot-lead: var(--ot-color-paper);
  --ot-focus: var(--ot-color-paper);
  --ot-earth: var(--ot-color-paper);
  --ot-action-hover: var(--ot-color-ink);
  --ot-action-hover-text: var(--ot-color-paper);
  --ot-second-hover: var(--ot-color-ultramarine);
  --ot-second-hover-fill: var(--ot-color-paper);
  --ot-mark: var(--ot-color-paper);
  color-scheme: dark;
}

:root,
[data-ot-surface="web"] {
  /* semantic: space and type on the web and in portals (the default; scale A) */
  --ot-space-1: 4px;
  --ot-space-2: 8px;
  --ot-space-3: 12px;
  --ot-space-4: 16px;
  --ot-space-5: 24px;
  --ot-space-6: 32px;
  --ot-space-7: 48px;
  --ot-space-8: 64px;
  --ot-space-9: 96px;
  --ot-space-10: 128px;
  --ot-section-number-size: 96px; --ot-section-number-line: 88px; --ot-section-number-track: -0.04em;
  --ot-cover-size: 56px; --ot-cover-line: 60px; --ot-cover-track: -0.03em;
  --ot-title-size: 40px; --ot-title-line: 44px; --ot-title-track: -0.025em;
  --ot-heading-size: 28px; --ot-heading-line: 32px; --ot-heading-track: -0.02em;
  --ot-lede-size: 20px; --ot-lede-line: 28px; --ot-lede-track: -0.012em;
  --ot-body-size: 17px; --ot-body-line: 28px; --ot-body-track: -0.005em;
  --ot-small-size: 14px; --ot-small-line: 20px; --ot-small-track: 0em;
  --ot-label-size: 12px; --ot-label-line: 16px; --ot-label-track: 0.08em;
  --ot-code-size: 14px; --ot-code-line: 24px; --ot-code-track: 0em;
  --ot-measure: 510px;
  --ot-lockup-type: 17px;
}

[data-ot-surface="doc"] {
  /* semantic: proposals and SOWs, US Letter at 816 x 1056 (scale A) */
  --ot-space-1: 4px;
  --ot-space-2: 8px;
  --ot-space-3: 12px;
  --ot-space-4: 16px;
  --ot-space-5: 24px;
  --ot-space-6: 32px;
  --ot-space-7: 48px;
  --ot-space-8: 64px;
  --ot-space-9: 96px;
  --ot-space-10: 128px;
  --ot-section-number-size: 56px; --ot-section-number-line: 52px; --ot-section-number-track: -0.04em;
  --ot-cover-size: 30px; --ot-cover-line: 36px; --ot-cover-track: -0.02em;
  --ot-title-size: 22px; --ot-title-line: 28px; --ot-title-track: -0.012em;
  --ot-heading-size: 17px; --ot-heading-line: 24px; --ot-heading-track: -0.005em;
  --ot-lede-size: 15.5px; --ot-lede-line: 20px; --ot-lede-track: 0em;
  --ot-body-size: 13.5px; --ot-body-line: 20px; --ot-body-track: 0em;
  --ot-small-size: 11.5px; --ot-small-line: 17px; --ot-small-track: 0em;
  --ot-label-size: 9.5px; --ot-label-line: 13px; --ot-label-track: 0.08em;
  --ot-code-size: 11.5px; --ot-code-line: 18px; --ot-code-track: 0em;
  --ot-measure: 405px;
  --ot-lockup-type: 16px;
}

[data-ot-surface="slide"] {
  /* semantic: slides on the 1920 x 1080 stage (scale A); space steps at 1.5x */
  --ot-space-1: 6px;
  --ot-space-2: 12px;
  --ot-space-3: 18px;
  --ot-space-4: 24px;
  --ot-space-5: 36px;
  --ot-space-6: 48px;
  --ot-space-7: 72px;
  --ot-space-8: 96px;
  --ot-space-9: 144px;
  --ot-space-10: 192px;
  --ot-section-number-size: 200px; --ot-section-number-line: 180px; --ot-section-number-track: -0.04em;
  --ot-cover-size: 76px; --ot-cover-line: 84px; --ot-cover-track: -0.03em;
  --ot-title-size: 76px; --ot-title-line: 84px; --ot-title-track: -0.03em;
  --ot-heading-size: 52px; --ot-heading-line: 60px; --ot-heading-track: -0.025em;
  --ot-lede-size: 40px; --ot-lede-line: 56px; --ot-lede-track: -0.025em;
  --ot-body-size: 36px; --ot-body-line: 48px; --ot-body-track: -0.02em;
  --ot-small-size: 30px; --ot-small-line: 44px; --ot-small-track: -0.02em;
  --ot-label-size: 24px; --ot-label-line: 32px; --ot-label-track: 0.08em;
  --ot-code-size: 28px; --ot-code-line: 44px; --ot-code-track: 0em;
  --ot-measure: 1080px;
  --ot-lockup-type: 24px;
}

[data-ot-surface="slide"][data-ot-density="room"],
[data-ot-density="room"] [data-ot-surface="slide"],
[data-ot-surface="slide"] [data-ot-density="room"] {
  /* semantic: the room setting, one switch per deck shown in a room (scale B's slide sizes) */
  --ot-space-1: 6px;
  --ot-space-2: 12px;
  --ot-space-3: 18px;
  --ot-space-4: 24px;
  --ot-space-5: 36px;
  --ot-space-6: 48px;
  --ot-space-7: 72px;
  --ot-space-8: 96px;
  --ot-space-9: 144px;
  --ot-space-10: 192px;
  --ot-section-number-size: 240px; --ot-section-number-line: 216px; --ot-section-number-track: -0.04em;
  --ot-cover-size: 92px; --ot-cover-line: 96px; --ot-cover-track: -0.035em;
  --ot-title-size: 92px; --ot-title-line: 96px; --ot-title-track: -0.035em;
  --ot-heading-size: 64px; --ot-heading-line: 68px; --ot-heading-track: -0.03em;
  --ot-lede-size: 48px; --ot-lede-line: 68px; --ot-lede-track: -0.025em;
  --ot-body-size: 44px; --ot-body-line: 60px; --ot-body-track: -0.025em;
  --ot-small-size: 34px; --ot-small-line: 48px; --ot-small-track: -0.02em;
  --ot-label-size: 28px; --ot-label-line: 36px; --ot-label-track: 0.08em;
  --ot-code-size: 32px; --ot-code-line: 52px; --ot-code-track: 0em;
  --ot-measure: 1320px;
}

@media (max-width: 759px) {
  /* semantic: the web on phones (D51): titles step down, the two largest space steps shrink, margins 24 px */
  :root:not([data-ot-surface="slide"]):not([data-ot-surface="doc"]),
  [data-ot-surface="web"] {
    --ot-space-9: 64px;
    --ot-space-10: 96px;
    --ot-web-margin: 24px;
    --ot-section-number-size: 64px; --ot-section-number-line: 56px; --ot-section-number-track: -0.04em;
    --ot-cover-size: 40px; --ot-cover-line: 44px; --ot-cover-track: -0.025em;
    --ot-title-size: 32px; --ot-title-line: 40px; --ot-title-track: -0.02em;
    --ot-heading-size: 24px; --ot-heading-line: 28px; --ot-heading-track: -0.012em;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* pages show the finished figure; decks keep each click, as a cut */
  :root { --ot-duration-fade: 0ms; --ot-duration-axis: 0ms; --ot-duration-bar: 0ms; --ot-duration-stagger: 0ms; --ot-duration-gap: 0ms; --ot-duration-stroke-min: 0ms; --ot-duration-stroke-max: 0ms; --ot-duration-line: 0ms; }
}