/* Generated by tools/design-gen from design/tokens.json. Do not edit: change design/ and run
   node tools/design-gen/generate.mjs
   CI fails when this file is stale against design/.
   Colour roles and surfaces: docs/design/ui.md §3. Secondary text is text2/text3, never a grey. */

/* Slipgates Sans: SIL Open Font License 1.1, in fonts/SlipgatesSans-OFL.txt. */
@font-face {
  font-family: "Slipgates Sans";
  src: url("fonts/SlipgatesSans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Slipgates Sans";
  src: url("fonts/SlipgatesSans-Italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

/* Slipgates Mono: SIL Open Font License 1.1, in fonts/SlipgatesMono-OFL.txt. */
@font-face {
  font-family: "Slipgates Mono";
  src: url("fonts/SlipgatesMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Slipgates Mono";
  src: url("fonts/SlipgatesMono-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Slipgates Mono";
  src: url("fonts/SlipgatesMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Slipgates Mono";
  src: url("fonts/SlipgatesMono-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Slipgates Mono";
  src: url("fonts/SlipgatesMono-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Slipgates Mono";
  src: url("fonts/SlipgatesMono-SemiBoldItalic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Slipgates Mono";
  src: url("fonts/SlipgatesMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Slipgates Mono";
  src: url("fonts/SlipgatesMono-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Light, and every value that doesn't change with the theme. */
  --ab-bridge: #0B7A6E;
  --ab-bridge-on: #FFFFFF;
  --ab-needs: #B87700;
  --ab-needs-fill: #FFF2D6;
  --ab-needs-head: #8F5300;
  --ab-needs-ink: #1A1200;
  --ab-needs-text: #7A4600;
  --ab-active: #0B63E5;
  --ab-active-track: #CFE0FA;
  --ab-active-track-row: #CFE0FA;
  --ab-agent: #6D4AE0;
  --ab-agent-text: #5B3CC4;
  --ab-agent-track: #E3DBFB;
  --ab-agent-track-row: #E3DBFB;
  --ab-danger: #C9302C;
  --ab-danger-text: #C9302C;
  --ab-neutral: #6E7781;
  --ab-external: #A3177F;
  --ab-external-text: #A3177F;
  --ab-external-track: #E3C1DB;
  --ab-shell: #EEF0F2;
  --ab-layer: #F9F9F9;
  --ab-card: #FFFFFF;
  --ab-stroke: rgba(0, 0, 0, 0.07);
  --ab-stroke2: rgba(0, 0, 0, 0.12);
  --ab-subtle: rgba(0, 0, 0, 0.03);
  --ab-selected: rgba(0, 0, 0, 0.05);
  --ab-field-edge: rgba(0, 0, 0, 0.45);
  --ab-text: #1A1A1A;
  --ab-text2: rgba(0, 0, 0, 0.62);
  --ab-text3: rgba(0, 0, 0, 0.58);
  --ab-shadow: rgba(0, 0, 0, 0.18);

  /* The glyph parts drawn from a token rather than currentColor (design/README.md). The
     knockout is the surface behind the glyph: set it where a glyph sits on another one. */
  --ab-glyph-ink: var(--ab-needs-ink);
  --ab-glyph-knockout: var(--ab-card);
  /* An icon's stroke on its 20 grid: 1.7 at 16 px or below, 1.4 at 24 px or above. */
  --ab-icon-stroke: 1.5;

  --ab-font-sans: "Slipgates Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Roboto", sans-serif;
  --ab-font-mono: "Slipgates Mono", "Cascadia Mono", "SF Mono", "Roboto Mono", ui-monospace, monospace;
  /* No synthesized styles (docs/design/ui.md §4.2): every weight and style used is a real face
     above, and a face the browser lacks is never faked from another. */
  font-synthesis: none;
  /* Tracking (docs/design/ui.md §4.3): letter-spacing for the title role and the wordmark only;
     body text stays untracked. */
  --ab-tracking-title: 0.02em;
  --ab-tracking-wordmark: 0.02em;
  /* Inline mono (docs/design/ui.md §4.2): the text face's x-height ratio, for font-size-adjust,
     and the scale mono takes where a browser has no font-size-adjust. Windows' text face,
     unless the page names its platform on <html data-platform>. */
  --ab-inline-mono-x: 0.5459; --ab-inline-mono-scale: 1.0498;
  --ab-radius-control: 4px;
  --ab-radius-card: 8px;
  --ab-radius-pill: 999px;
  --ab-space-1: 4px;
  --ab-space-2: 8px;
  --ab-space-3: 12px;
  --ab-space-4: 16px;
  --ab-space-5: 20px;
  --ab-space-6: 24px;
  --ab-space-8: 32px;
  --ab-space-10: 40px;
  --ab-space-12: 48px;

  /* Motion (docs/design/ui.md §5.3): durations, easings and distances, the glyphs' periods,
     then each catalogue entry's own. Under reduced motion (below) they collapse. */
  --ab-motion-instant: 0ms;
  --ab-motion-fast: 83ms;
  --ab-motion-standard: 167ms;
  --ab-motion-emphasis: 250ms;
  --ab-motion-cross-fade: 83ms;
  --ab-motion-ease-standard: cubic-bezier(0.33, 0, 0.67, 1);
  --ab-motion-ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --ab-motion-ease-accelerate: cubic-bezier(1, 0, 1, 1);
  --ab-motion-distance-nudge: 4px;
  --ab-motion-distance-small: 12px;
  --ab-motion-distance-medium: 24px;
  --ab-motion-travel: 1;
  --ab-motion-glyph-working-period: 1200ms;
  --ab-motion-glyph-delegating-period: 8000ms;
  --ab-motion-push-duration: 250ms;
  --ab-motion-push-ease: cubic-bezier(0, 0, 0, 1);
  --ab-motion-push-distance: 24px;
  --ab-motion-pane-duration: 167ms;
  --ab-motion-pane-ease: cubic-bezier(0, 0, 0, 1);
  --ab-motion-pane-distance: 12px;
  --ab-motion-pane-exit-duration: 83ms;
  --ab-motion-pane-exit-ease: cubic-bezier(1, 0, 1, 1);
  --ab-motion-tab-duration: 167ms;
  --ab-motion-tab-ease: cubic-bezier(0, 0, 0, 1);
  --ab-motion-disclosure-duration: 167ms;
  --ab-motion-disclosure-ease: cubic-bezier(0, 0, 0, 1);
  --ab-motion-disclosure-distance: 4px;
  --ab-motion-disclosure-exit-duration: 83ms;
  --ab-motion-disclosure-exit-ease: cubic-bezier(1, 0, 1, 1);
  --ab-motion-list-item-duration: 167ms;
  --ab-motion-list-item-ease: cubic-bezier(0, 0, 0, 1);
  --ab-motion-list-item-exit-duration: 83ms;
  --ab-motion-list-item-exit-ease: cubic-bezier(1, 0, 1, 1);
  --ab-motion-glyph-duration: 83ms;
  --ab-motion-glyph-ease: cubic-bezier(0.33, 0, 0.67, 1);
  --ab-motion-activity-dot-duration: 167ms;
  --ab-motion-activity-dot-ease: cubic-bezier(0, 0, 0, 1);
  --ab-motion-activity-dot-exit-duration: 83ms;
  --ab-motion-activity-dot-exit-ease: cubic-bezier(1, 0, 1, 1);
  --ab-motion-selection-duration: 167ms;
  --ab-motion-selection-ease: cubic-bezier(0.33, 0, 0.67, 1);
  --ab-motion-press-duration: 83ms;
  --ab-motion-press-ease: cubic-bezier(0.33, 0, 0.67, 1);
  --ab-motion-acknowledge-duration: 167ms;
  --ab-motion-acknowledge-ease: cubic-bezier(0, 0, 0, 1);
  --ab-motion-acknowledge-distance: 12px;
  --ab-motion-toast-duration: 167ms;
  --ab-motion-toast-ease: cubic-bezier(0, 0, 0, 1);
  --ab-motion-toast-distance: 12px;
  --ab-motion-toast-exit-duration: 83ms;
  --ab-motion-toast-exit-ease: cubic-bezier(1, 0, 1, 1);
  --ab-motion-sheet-duration: 250ms;
  --ab-motion-sheet-ease: cubic-bezier(0, 0, 0, 1);
  --ab-motion-sheet-exit-duration: 167ms;
  --ab-motion-sheet-exit-ease: cubic-bezier(1, 0, 1, 1);
  --ab-motion-menu-duration: 83ms;
  --ab-motion-menu-ease: cubic-bezier(0, 0, 0, 1);
  --ab-motion-menu-distance: 4px;
  --ab-motion-menu-exit-duration: 83ms;
  --ab-motion-menu-exit-ease: cubic-bezier(1, 0, 1, 1);
  --ab-motion-scroll-duration: 250ms;
  --ab-motion-scroll-ease: cubic-bezier(0.33, 0, 0.67, 1);
  --ab-motion-reorder-duration: 167ms;
  --ab-motion-reorder-ease: cubic-bezier(0.33, 0, 0.67, 1);
  --ab-motion-collapse-duration: 167ms;
  --ab-motion-collapse-ease: cubic-bezier(0.33, 0, 0.67, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ab-bridge: #2DD4BF;
    --ab-bridge-on: #062621;
    --ab-needs: #FFB224;
    --ab-needs-fill: rgba(255, 178, 36, 0.1);
    --ab-needs-head: #FFB224;
    --ab-needs-ink: #14100A;
    --ab-needs-text: #FFD27A;
    --ab-active: #4C9AFF;
    --ab-active-track: #1E3556;
    --ab-active-track-row: #4071AF;
    --ab-agent: #A78BFA;
    --ab-agent-text: #C4B5FD;
    --ab-agent-track: #33285A;
    --ab-agent-track-row: #7768AC;
    --ab-danger: #FF6B6B;
    --ab-danger-text: #FF9494;
    --ab-neutral: #8B949E;
    --ab-external: #F769CF;
    --ab-external-text: #FBA8E4;
    --ab-external-track: #5B3A56;
    --ab-shell: #202326;
    --ab-layer: #272A2E;
    --ab-card: #2F3338;
    --ab-stroke: rgba(255, 255, 255, 0.07);
    --ab-stroke2: rgba(255, 255, 255, 0.12);
    --ab-subtle: rgba(255, 255, 255, 0.05);
    --ab-selected: rgba(255, 255, 255, 0.07);
    --ab-field-edge: rgba(255, 255, 255, 0.3);
    --ab-text: #FFFFFF;
    --ab-text2: rgba(255, 255, 255, 0.72);
    --ab-text3: rgba(255, 255, 255, 0.54);
    --ab-shadow: rgba(0, 0, 0, 0.18);
  }
}

/* Inline mono beside each platform's text face (tokens.json type.inlineMono), on the platforms
   whose face it is (pwa/js/platform.js names them on <html data-platform>). */
:root[data-platform="macos"], :root[data-platform="ios"], :root[data-platform="ipados"] { --ab-inline-mono-x: 0.5459; --ab-inline-mono-scale: 1.0498; }
:root[data-platform="android"] { --ab-inline-mono-x: 0.5459; --ab-inline-mono-scale: 1.0498; }

/* High contrast: every role and surface is a system colour (tokens.json hc). */
@media (forced-colors: active) {
  :root {
    --ab-bridge: Highlight;
    --ab-bridge-on: HighlightText;
    --ab-needs: Highlight;
    --ab-needs-fill: Canvas;
    --ab-needs-head: Highlight;
    --ab-needs-ink: HighlightText;
    --ab-needs-text: Highlight;
    --ab-active: Highlight;
    --ab-active-track: GrayText;
    --ab-active-track-row: GrayText;
    --ab-agent: Highlight;
    --ab-agent-text: Highlight;
    --ab-agent-track: GrayText;
    --ab-agent-track-row: GrayText;
    --ab-danger: CanvasText;
    --ab-danger-text: CanvasText;
    --ab-neutral: GrayText;
    --ab-external: CanvasText;
    --ab-external-text: CanvasText;
    --ab-external-track: GrayText;
    --ab-shell: Canvas;
    --ab-layer: Canvas;
    --ab-card: Canvas;
    --ab-stroke: CanvasText;
    --ab-stroke2: CanvasText;
    --ab-subtle: Canvas;
    --ab-selected: Canvas;
    --ab-field-edge: CanvasText;
    --ab-text: CanvasText;
    --ab-text2: CanvasText;
    --ab-text3: CanvasText;
    --ab-shadow: CanvasText;
  }
}

/* Reduced motion: nothing travels, and every duration is 0 but a cross-fade's, which a
   catalogue entry marked crossFade takes instead. The glyphs' periods are not here: under
   reduced motion a glyph stops (animation: none) rather than turning faster. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ab-motion-instant: 0ms;
    --ab-motion-fast: 0ms;
    --ab-motion-standard: 0ms;
    --ab-motion-emphasis: 0ms;
    --ab-motion-cross-fade: 83ms;
    --ab-motion-distance-nudge: 0px;
    --ab-motion-distance-small: 0px;
    --ab-motion-distance-medium: 0px;
    --ab-motion-travel: 0;
    --ab-motion-push-duration: 83ms;
    --ab-motion-push-distance: 0px;
    --ab-motion-pane-duration: 83ms;
    --ab-motion-pane-distance: 0px;
    --ab-motion-pane-exit-duration: 83ms;
    --ab-motion-tab-duration: 0ms;
    --ab-motion-disclosure-duration: 0ms;
    --ab-motion-disclosure-distance: 0px;
    --ab-motion-disclosure-exit-duration: 0ms;
    --ab-motion-list-item-duration: 83ms;
    --ab-motion-list-item-exit-duration: 83ms;
    --ab-motion-glyph-duration: 0ms;
    --ab-motion-activity-dot-duration: 0ms;
    --ab-motion-activity-dot-exit-duration: 0ms;
    --ab-motion-selection-duration: 0ms;
    --ab-motion-press-duration: 0ms;
    --ab-motion-acknowledge-duration: 83ms;
    --ab-motion-acknowledge-distance: 0px;
    --ab-motion-toast-duration: 83ms;
    --ab-motion-toast-distance: 0px;
    --ab-motion-toast-exit-duration: 83ms;
    --ab-motion-sheet-duration: 83ms;
    --ab-motion-sheet-exit-duration: 83ms;
    --ab-motion-menu-duration: 0ms;
    --ab-motion-menu-distance: 0px;
    --ab-motion-menu-exit-duration: 0ms;
    --ab-motion-scroll-duration: 0ms;
    --ab-motion-reorder-duration: 0ms;
    --ab-motion-collapse-duration: 83ms;
  }
}