/* 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);
   --danger is a field to fix only. 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, danger */
  --ground: #f2f2f7;
  --surface: #ffffff;
  --ink: #1c1c1e;
  --muted: #6e6e73;
  --sel: #e5e5ea;
  --win: #248a3d;
  --danger: #d70015; /* a code field to fix and the line saying how (css/verify.css) only: the app's system red, 5.3:1 */
  /* 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;
  /* a card's outcome heading (design-tokens --text-headline-medium): between h3 and the section heads */
  --fs-title: 28px;
  --lh-title: 1.2;
  --tr-title: -0.022em;
  --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;
  --hit-min: 24px; /* the smallest pointer target anywhere (WCAG 2.2 SC 2.5.8): an inline link's padded hit area */
  --star: 12px; /* the app's 3D rating star, its size on the app's library card (sidebars.bdeb2397 --star) */
  --btn-l: 52px;
  --ic-s: 16px;
  --ic-m: 24px;
  --ic-l: 40px;
  --ic-xl: 64px;
  --page: 1200px;
  --tab-label: 240px;
  --auth-card: 500px; /* the /verify/ card: Clerk's 400px sign-in card at 1.25x */
  --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); }
}

/* the hero window's plan row (js/window.js, css/window.css .win-plan): the app's sidebar plan row
   (sidebars.bdeb2397/usage.b7e2a940.css .sb-usage) at its design px, which the window draws its sidebar at */
:root {
  --tool: 24px; /* the app's footer tool button (sidebars.bdeb2397 --tool) */
  --tool-ic: 14px; /* its line icon (--tool-ic) */
  --usage-bar: 4px; /* the track and fill (--usage-bar) */
  --usage-gap: var(--sp-8); /* the plan's name to the bar, and the bar to the + (--usage-gap) */
  --usage-fill-d: var(--d-base); /* the fill moving to a new figure (--usage-fill-d) */
  --usage-from: 62; /* the share of the month used as the window's rotation starts, a percent (unitless) */
  --usage-to: 80; /* the most the rotation's work brings it to */
  --usage-step: 0.25; /* what one step, click or reply of a chat spends */
}

/* the publish section (js/publish.js, css/publish.css): one loop on the showcases' clock (js/timelapse.js), the app's
   Automations tab at its sizes (sidebars.bdeb2397/automations.03378ba4.css, publish.6c0fd59e.css) */
:root {
  --pub-hold-start: 300ms; /* a beat on the tab before Publish is pressed */
  --pub-hold-end: 900ms; /* a beat on the paid-out figure */
  --pub-wrap: 1400ms; /* the tween back to the exact start */
  --pub-move: 450ms; /* the pointer travelling to a control */
  --pub-type: 550ms; /* one field of the dialog typed */
  --pub-land: 450ms; /* the dialog opening or closing, the card landing, a transfer sliding in */
  --pub-step: 450ms; /* one transfer to the next */
  --pub-result: 750ms; /* the dialog's Published result, read */
  --pub-press: 0.96; /* a pressed control (the app's .am-try:active), and the dialog's scale as it opens */
  --pub-cols: minmax(0, 7fr) minmax(0, 5fr); /* the app beside the money */
  --pub-thumb: 16 / 9; /* a catalogue thumbnail (publish.6c0fd59e.js THUMB_W x THUMB_H) */
  --pub-lines: 2; /* a card's description, clamped (.am-desc) */
  --pub-frame: 452px; /* the app frame's height */
  --pub-frame-phone: 420px;
  --pub-prompt: 64px; /* the System Prompt field's height in the dialog */
  --pub-dlg: 560px; /* the dialog's widest */
}

/* the showcases carousel (js/carousel.js, css/carousel.css): one slide at a time, story segments under it */
:root {
  --car-seen: 0.5; /* the share of the track on screen for its slide to play and the carousel to rotate (unitless) */
  --car-seg: var(--sp-4); /* a story segment's bar */
  --car-drag: var(--sp-8); /* a mouse moves this far before a press becomes a drag (a click under it stays a click) */
  --car-swipe: var(--sp-48); /* a drag this far moves on a slide; less snaps back */
}
:root {
  --pub-rows: 4; /* earnings the list shows at once */
  --pub-row: var(--sp-64); /* one earnings row's height */
  --fs-paid: clamp(44px, 5.6vw, 84px); /* the paid-out figure: the display size, scaling slower so the heading keeps one line beside it as it grows */
  --pub-fit: 5; /* earnings rows the list beside the app frame holds exactly (each takes that share of its height) */
  --lu-stroke: 2; /* a lucide line icon's stroke, in its 24-unit box (lucide's default) */
}