/* GENERATED by tools/build-tokens.mjs from tokens.js. Do not edit. */
/* Colours are references to packages/core/design-tokens.css, which must load first. */

:root {

  /* type: one fluid scale, continuing the product ladder upward */
  --w-fs-mega: clamp(3.25rem, min(11.6vw, 19.5svh), 12.5rem);
  --w-lh-mega: 0.9;
  --w-ls-mega: -0.05em;
  --w-fw-mega: 700;
  --w-fs-display: clamp(2.75rem, min(7.4vw, 12.5svh), 7.5rem);
  --w-lh-display: 0.95;
  --w-ls-display: -0.042em;
  --w-fw-display: 700;
  --w-fs-h2: clamp(2rem, min(4.5vw, 7.6svh), 4.5rem);
  --w-lh-h2: 1.02;
  --w-ls-h2: -0.032em;
  --w-fw-h2: 600;
  --w-fs-h3: clamp(1.5rem, min(2.3vw, 4svh), 2.25rem);
  --w-lh-h3: 1.12;
  --w-ls-h3: -0.02em;
  --w-fw-h3: 600;
  --w-fs-lead: clamp(1.25rem, min(1.75vw, 3.1svh), 1.75rem);
  --w-lh-lead: 1.3;
  --w-ls-lead: -0.012em;
  --w-fw-lead: 500;
  --w-fs-body: clamp(1rem, 1.1vw, 1.125rem);
  --w-lh-body: 1.5;
  --w-ls-body: 0;
  --w-fw-body: 500;
  --w-fs-prose: clamp(1.0625rem, 1.3vw, 1.25rem);
  --w-lh-prose: 1.6;
  --w-ls-prose: 0;
  --w-fw-prose: 500;
  --w-fs-label: 0.9375rem;
  --w-lh-label: 1.2;
  --w-ls-label: -0.005em;
  --w-fw-label: 600;
  --w-fs-cap: 0.8125rem;
  --w-lh-cap: 1.35;
  --w-ls-cap: 0;
  --w-fw-cap: 500;
  --w-fs-figure: clamp(2.5rem, 5.2vw, 5rem);
  --w-lh-figure: 1;
  --w-ls-figure: -0.02em;
  --w-fw-figure: 700;
  --w-fs-figure-xl: clamp(3.5rem, 13vw, 14rem);
  --w-lh-figure-xl: 0.92;
  --w-ls-figure-xl: -0.03em;
  --w-fw-figure-xl: 700;
  --w-fs-figure-sm: clamp(2.5rem, min(4.4vw, 7.4svh), 5rem);
  --w-lh-figure-sm: 1;
  --w-ls-figure-sm: -0.02em;
  --w-fw-figure-sm: 700;

  /* gap: a relationship, never a size */
  --w-g-inline: 6px;
  --w-g-tight: 10px;
  --w-g-control: 14px;
  --w-g-sibling: 20px;
  --w-g-group: clamp(24px, min(2.8vw, 4.2svh), 40px);
  --w-g-block: clamp(48px, min(6.5vw, 8svh), 104px);
  --w-g-scene: clamp(104px, min(15vw, 13svh), 248px);

  /* layout */
  --w-gutter: clamp(20px, 4.2vw, 72px);
  --w-box-foot: min(var(--w-gutter), 6.5svh);
  --w-maxw: 1680px;
  --w-article: 54rem;
  --w-pcard-min: 340px;
  --w-measure: 62ch;
  --w-measure-lead: 34ch;
  --w-cols: 12;
  --w-cols-phone: 4;
  --w-col-gap: clamp(12px, 1.6vw, 24px);
  --w-nav-h: 60px;
  --w-nav-offset: clamp(12px, 1.6vw, 24px);
  --w-nav-pad: 8px;
  --w-nav-maxw: 1120px;
  --w-nav-mark: 36px;
  --w-nav-air: clamp(24px, 4.2svh, 40px);
  --w-redact-w: 3.3em;
  --w-redact-h: 0.82em;
  --w-menu-w: 344px;
  --w-scene-r: clamp(28px, 3.6vw, 56px);
  --w-touch: 44px;

  /* motion: the product curves, plus the two narrative curves */
  --w-ease: cubic-bezier(.2,.7,.2,1);
  --w-spring: cubic-bezier(.34,1.3,.4,1);
  --w-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --w-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --w-t-fast: .18s;
  --w-t-med: .5s;
  --w-t-slow: .8s;
  --w-t-reveal: .9s;
  --w-t-scene: 1.2s;
  --w-t-count: 1.6s;
  --w-t-marquee: 32s;
  --w-t-type: .9s;
  --w-stagger-word: 0.04s;
  --w-stagger-line: 0.08s;
  --w-stagger-card: 0.06s;
  --w-rise: 105%;
  --w-rise-soft: 24px;
  --w-clip-pad: 0.22em;
  --w-hover-lift: translateY(-2px);
  --w-hover-press: scale(.97);
  --w-hover-grow: scale(1.04);

  /* controls: one button, one tag, one field */
  --w-btn-h: 56px;
  --w-btn-h-sm: 44px;
  --w-btn-pad-start: 26px;
  --w-btn-pad-start-sm: 18px;
  --w-btn-pad-end: 6px;
  --w-btn-seat: 44px;
  --w-btn-seat-sm: 32px;
  --w-tag-h: 32px;
  --w-tag-pad: 0 12px;
  --w-tag-dot: 8px;
  --w-field-h: 56px;
  --w-field-pad: 0 22px;
  --w-stroke: 1.5px;
  --w-focus-w: 3px;
  --w-focus-offset: 3px;
  --w-nav-blur: 14px;
  --w-icon: 1.25em;
  --w-typing-dot: 7px;

  /* the highlighter: one marked word per headline */
  --w-mark-tilt: -1.5deg;
  --w-mark-bleed-x: 0.12em;
  --w-mark-bleed-top: 0.1em;
  --w-mark-bleed-bottom: 0.02em;
  --w-mark-r: 0.12em;

  /* the Guru: three sizes, and a size is a choice of which Guru appears */
  --w-guru-hero: clamp(168px, min(24vw, 38svh), 380px);
  --w-guru-inline: 0.84em;
  --w-guru-mark: 44px;
  --w-guru-voice: clamp(96px, 15svh, 148px);

  /* the trail: what has been read, and what is left */
  --w-trail-width: 44px;
  --w-trail-guru: 40px;
  --w-trail-dot: 10px;
  --w-trail-step: 34px;
  --w-trail-pad: 8px;
  --w-trail-fill: 3px;

  /* cursor: a pointer with a face */
  --w-cursor-size: 30px;
  --w-cursor-tip: 3px;
  --w-cursor-edge: 2px;
  --w-cursor-eye-w: 5px;
  --w-cursor-eye-h: 11px;
  --w-cursor-eye-gap: 4px;
  --w-cursor-tab-h: 30px;
  --w-cursor-tab-pad: 0 12px;
  --w-cursor-tab-gap: 6px;
  --w-t-blink: 4.6s;

  /* sticker: the one layer above the page, so the one thing with a shadow */
  --w-sticker-diecut: 5px;
  --w-sticker-r: 18px;
  --w-sticker-pad: 12px 22px;
  --w-sticker-shadow: 0 10px 30px rgba(20,24,15,.16);
  --w-sticker-shadow-lifted: 0 22px 44px rgba(20,24,15,.22);
  --w-sticker-rot-1: -8deg;
  --w-sticker-rot-2: -4deg;
  --w-sticker-rot-3: 3deg;
  --w-sticker-rot-4: 7deg;
  --w-sticker-lift: 1.06;

  /* receipt */
  --w-receipt-w: 360px;
  --w-receipt-pad: 28px 24px;
  --w-receipt-tooth: 14px;
  --w-receipt-rule: 2px;
  --w-receipt-rule-gap: 6px;

  /* scene: pinned lengths, the phone, the standing phone */
  --w-pin-drain: 340vh;
  --w-pin-left: 460vh;
  --w-pin-guru: 460vh;
  --w-phone-w: clamp(200px, min(23vw, 29svh), 336px);
  --w-phone-ratio: 430 / 932;
  --w-phone-fit: min(clamp(236px, 23vw, 336px), 28svh);
  --w-phone-fit-stacked: clamp(80px, calc((100svh - 400px) * 0.46), 62vw);
  --w-phone-fit-stands: min(clamp(236px, 26vw, 400px), 36svh);
  --w-phone-fit-one: min(clamp(236px, 26vw, 400px), 34svh);
  --w-phone-fit-chat: min(clamp(248px, 28vw, 400px), 37svh);
  --w-phone-fit-chat-stacked: min(86vw, 400px);
  --w-wa-chat: #0B141A;
  --w-wa-bar: #1F2C34;
  --w-wa-incoming: #1F2C34;
  --w-wa-outgoing: #005C4B;
  --w-wa-text: #E9EDEF;
  --w-wa-quiet: #8696A0;
  --w-wa-accent: #00A884;
  --w-wa-read: #53BDEB;
  --w-wa-chip: #182229;
  --w-wa-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --w-wa-fs: 4.1cqi;
  --w-phone-fit-pair: min(clamp(180px, 19vw, 300px), 31svh);
  --w-phone-fit-trio: min(clamp(150px, 15vw, 240px), 27svh);
  --w-phone-row: min(62vw, 280px);
  --w-guru-fit-stacked: clamp(120px, calc(100svh - 510px), 72vw);
  --w-phone-r-share: 0.125;
  --w-phone-bezel-share: 0.026;
  --w-figure-fit: 18.5cqi;
  --w-entry-row: 72px;
  --w-entries-min: 2;
  --w-entries-max: 4.4;
  --w-entries-min-stacked: 1.5;
  --w-app-w: clamp(320px, 36vw, 540px);
  --w-drain-rest: 600px;
  --w-drain-rest-stacked: 540px;
  --w-chat-h: clamp(200px, 31svh, 440px);
  --w-tilt-perspective: 1500px;
  --w-tilt-x: 16deg;
  --w-tilt-y: 22deg;
  --w-tilt-z: -5deg;
  --w-tilt-swing: -12deg;
  --w-tilt-depth: 0.04;
  --w-tilt-rest: 0.035;
  --w-tilt-mid: 0.08;
  --w-tilt-high: 0.22;
  --w-tilt-shade: 0.035;
  --w-tilt-shade-c: rgba(20,24,15,.34);
  --w-tilt-edge: rgba(255,255,255,.18);
  --w-tilt-fit: 0.9;
  --w-tilt-rise: 0.05;
  --w-tilt-wide: 74cqw;
  --w-phone-stands-tall: 2.1067;
  --w-hero-min: 100svh;
  --w-screen: 100svh;
  --w-headline-fit: 15cqi;
  --w-card-pad: clamp(24px, 4svh, 40px);
  --w-fs-card: clamp(0.9375rem, 2.1svh, 1.125rem);
  --w-nav-clear: calc(var(--w-nav-h) + 2 * var(--w-nav-offset));

  /* layer: the stacking order, named once */
  --w-z-below: -1;
  --w-z-content: 1;
  --w-z-sticker: 20;
  --w-z-nav: 100;
  --w-z-overlay: 200;
  --w-z-loader: 300;
  --w-z-cursor: 400;

  /* texture: the dot grid */
  --w-dot-size: 1.5px;
  --w-dot-pitch: 22px;
}

:root, [data-ground="paper"] {
  --w-bg: var(--canvas);
  --w-fg: var(--ink);
  --w-quiet: var(--mute);
  --w-line: var(--hairline);
  --w-panel: var(--surface);
  --w-well: var(--field);
  --w-accent: var(--lime-500);
  --w-on-accent: var(--ink);
  --w-action: var(--deep);
  --w-on-action: var(--ink-inv);
  --w-seat: var(--lime-500);
  --w-on-seat: var(--ink);
  --w-cursor: var(--dark);
  --w-on-cursor: var(--lime-500);
  --w-grid-dot: rgba(20,24,15,.10);
}

[data-ground="card"] {
  --w-bg: var(--surface);
  --w-fg: var(--ink);
  --w-quiet: var(--mute);
  --w-line: var(--hairline);
  --w-panel: var(--raised);
  --w-well: var(--field);
  --w-accent: var(--lime-500);
  --w-on-accent: var(--ink);
  --w-action: var(--deep);
  --w-on-action: var(--ink-inv);
  --w-seat: var(--lime-500);
  --w-on-seat: var(--ink);
  --w-cursor: var(--dark);
  --w-on-cursor: var(--lime-500);
  --w-grid-dot: rgba(20,24,15,.10);
}

[data-ground="lime"] {
  --w-bg: var(--lime-500);
  --w-fg: var(--ink);
  --w-quiet: var(--mute);
  --w-line: var(--hairline);
  --w-panel: var(--lime-tint);
  --w-well: var(--lime-300);
  --w-accent: var(--deep);
  --w-on-accent: var(--lime-500);
  --w-action: var(--deep);
  --w-on-action: var(--ink-inv);
  --w-seat: var(--lime-500);
  --w-on-seat: var(--ink);
  --w-cursor: var(--dark);
  --w-on-cursor: var(--lime-500);
  --w-grid-dot: rgba(20,24,15,.10);
}

[data-ground="deep"] {
  --w-bg: var(--deep);
  --w-fg: var(--ink-inv);
  --w-quiet: var(--mute-dark);
  --w-line: rgba(255,255,255,.12);
  --w-panel: var(--dark);
  --w-well: var(--dark-hover);
  --w-accent: var(--lime-500);
  --w-on-accent: var(--ink);
  --w-action: var(--lime-500);
  --w-on-action: var(--ink);
  --w-seat: var(--dark);
  --w-on-seat: var(--lime-500);
  --w-cursor: var(--lime-500);
  --w-on-cursor: var(--ink);
  --w-grid-dot: rgba(255,255,255,.09);
}

[data-ground="ink"] {
  --w-bg: var(--dark);
  --w-fg: var(--ink-inv);
  --w-quiet: var(--mute-dark);
  --w-line: rgba(255,255,255,.12);
  --w-panel: var(--deep);
  --w-well: var(--dark-hover);
  --w-accent: var(--lime-500);
  --w-on-accent: var(--ink);
  --w-action: var(--lime-500);
  --w-on-action: var(--ink);
  --w-seat: var(--dark);
  --w-on-seat: var(--lime-500);
  --w-cursor: var(--lime-500);
  --w-on-cursor: var(--ink);
  --w-grid-dot: rgba(255,255,255,.09);
}

[data-mood="keen"] {
  --w-pose-scale: 1.14;
  --w-pose-turn: -8deg;
  --w-pose-cheek: -58%;
}

[data-mood="drag"] {
  --w-pose-scale: 1.1;
  --w-pose-eye: 1.25 1.12;
}

[data-mood="held"] {
  --w-pose-scale: 1.16 0.92;
  --w-pose-turn: 7deg;
  --w-pose-eye: 1.3 0.16;
}

[data-mood="poke"] {
  --w-pose-scale: 1.1;
  --w-pose-turn: -16deg;
  --w-pose-eye-left: 1.25 0.16;
}

[data-mood="doze"] {
  --w-pose-lid: -38%;
}

[data-pressed="true"] {
  --w-pose-scale: 0.86;
  --w-pose-eye: 1.2 0.16;
}