/* The site's tokens. Palette and family are the app's own (../../sidebars.bdeb2397/tokens.bdeb2397.css): no chromatic
   accent, the 3D icons are the only color; ink is the primary action. --win is status only (a result the agent got).
   Spacing, durations and easings are design-tokens' (dist/tokens.css: --spacing-*, --duration-*, --ease-*). */
:root {
  --ui: "SF Pro Rounded", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* palette: ground, surface, ink, muted, hairline, win */
  --ground: #f2f2f7;
  --surface: #ffffff;
  --ink: #1c1c1e;
  --muted: #6e6e73;
  --sel: #e5e5ea;
  --win: #248a3d;
  /* category coding only: the edge the computer's frame lights in while a chat's app is in control (the app's tint) */
  --tint-tickets: #d6389f;
  --tint-youtube: #ff3b30;
  --tint-inbox: #1a73e8;
  --tint-flights: #0fa3b1;
  --hover: color-mix(in srgb, var(--sel) 60%, transparent);
  --ink-hover: color-mix(in srgb, var(--ink) 84%, var(--surface));
  --scrim: color-mix(in srgb, var(--ink) 18%, transparent);
  --lift: 0 24px 64px color-mix(in srgb, var(--ink) 13%, transparent), 0 2px 8px color-mix(in srgb, var(--ink) 6%, transparent);
  --lift-s: 0 8px 24px color-mix(in srgb, var(--ink) 12%, transparent);
  --hair: 1px;

  /* spacing (design-tokens --spacing-*) */
  --sp-2: 2px; --sp-4: 4px; --sp-6: 6px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-20: 20px;
  --sp-24: 24px; --sp-32: 32px; --sp-40: 40px; --sp-48: 48px; --sp-64: 64px; --sp-72: 72px; --sp-96: 96px;

  /* radii: controls (rows, fields, tiles, chips' tiles) and surfaces (cards, the window); pills are 9999px */
  --r-ctl: 8px;
  --r-surf: 16px;
  --r-pill: 9999px;

  /* type ramp: display and section heads tracked tight, body at 400 */
  --fs-display: clamp(44px, 7.2vw, 84px);
  --lh-display: 1.02;
  --tr-display: -0.042em;
  --fs-h2: clamp(32px, 4.6vw, 54px);
  --lh-h2: 1.06;
  --tr-h2: -0.034em;
  --fs-h3: 21px;
  --lh-h3: 1.25;
  --tr-h3: -0.014em;
  --fs-lede: clamp(17px, 1.55vw, 20px);
  --lh-lede: 1.5;
  --fs-body: 16px;
  --lh-body: 1.5;
  --fs-small: 14px;
  --lh-small: 1.45;
  --fs-meta: 13px;
  --lh-meta: 1.4;
  --fs-tiny: 12px;

  /* targets and sizes */
  --tap: 44px;
  --btn-l: 52px;
  --ic-s: 16px;
  --ic-m: 24px;
  --ic-l: 40px;
  --ic-xl: 64px;
  --page: 1200px;
  --gutter: var(--sp-24);

  /* motion (design-tokens --duration-*, --ease-*, --spring-*) */
  --d-fast: 150ms;
  --d-base: 200ms;
  --d-slow: 300ms;
  --d-deliberate: 500ms;
  --ease-std: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-in: cubic-bezier(0.3, 0, 0.8, 0.15);
  --ease-move: cubic-bezier(0.4, 0, 0.2, 1);
  --spring: cubic-bezier(0.27, 1.06, 0.18, 1);
  --spring-pop: cubic-bezier(0.42, 1.67, 0.21, 0.9);
}

@media (max-width: 640px) {
  :root { --gutter: var(--sp-16); }
}