/* GENERATED by packages/shared/tokens/build.mjs from packages/shared/tokens/design.tokens.json (sha256 c60816cb19d6011b).
   DO NOT HAND-EDIT: change design.tokens.json and run `npm run tokens` in apps/kith-demo. tests/tokens.test.mjs fails on drift.

   Two swappable skins as token sets (TP-2089). Joe is split between Along and Rove;
   no name or palette is decided and brand is applied last, so every colour, face and
   shape below is a token and nothing in app.css names a hex value.

   Select a skin with <html data-skin="rove|along"> (the app reads ?skin= and the demo
   toggle). With no attribute the page renders Rove, the previously tested candidate.

   Rules the tokens enforce:
   - --accent (marigold) is spent once: the mutual-yes state. Nothing else may read it,
     and no shared token in this file (nav, pressed, aliases) references it.
   - Person marks use the --tint-* family only; it never contains action, accent,
     error or success colours.
   - Display face is a role (--display); serif or condensed is the skin's choice.
   - Motion is a token: under prefers-reduced-motion every duration is 0 and the press
     transform is the identity (the last block of this file). */
:root,
:root[data-skin="rove"] {
  --skin-name: "rove";
  /* Rove: blue colorscape (BRAND-SYSTEM 4.2), concierge, ticket notches */
  --canvas: #f4f6fb;
  --surface: #fff;
  --paper2: #eaeff8;
  --text: #172d56;
  --muted: #52617c;
  --action: #244ccb;
  --action-hover: #193b9e;
  --on-action: #fff;
  --accent: #f3cf58;
  --on-accent: #172d56;
  --selected: #e7edff;
  --line: #c9d3e4;
  --field-border: #70809d;
  --focus: #244ccb;
  --disabled: #e3e8f0;
  --on-disabled: #52617c;
  --success: #275a41;
  --success-surface: #eaf4ed;
  --error: #a52c28;
  --error-surface: #fff0ee;
  --tint-sky: #dce6f7;
  --tint-apricot: #f6e3d3;
  --tint-sage: #dde9e1;
  --tint-rose: #f4dedc;
  --tint-slate: #e4e6ec;
  --display: "Avenir Next Condensed", "Arial Narrow", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.01em;
  --display-style: normal;
  --body: "Avenir Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-control: 10px;
  --r-card: 18px;
  --r-ticket: 14px;
  --ticket-shadow: none;
  --card-shadow: none;
  --ticket-notch: block;
  --wordmark-case: lowercase;
}
:root[data-skin="along"] {
  --skin-name: "along";
  /* Along: Iowan Old Style display, berry ink, cool whites; sleeve edges and layered panels. Marigold is the one state colour in both skins; Along's apricot lives in person tints and imagery only (BRAND-SYSTEM 4.3). */
  --canvas: #f8f7fa;
  --surface: #fff;
  --paper2: #efecf2;
  --text: #322a34;
  --muted: #635c69;
  --action: #572b43;
  --action-hover: #3f1d30;
  --on-action: #fff;
  --accent: #f3cf58;
  --on-accent: #322a34;
  --selected: #efe1ea;
  --line: #c8bfcb;
  --field-border: #877b8c;
  --focus: #7a2f58;
  --disabled: #e9e5ec;
  --on-disabled: #635c69;
  --success: #275a41;
  --success-surface: #eaf4ed;
  --error: #a52c28;
  --error-surface: #fff0ee;
  --tint-sky: #dde8f1;
  --tint-apricot: #f6e3d3;
  --tint-sage: #dde9e1;
  --tint-rose: #f4dedc;
  --tint-slate: #e4e6ec;
  --display: "Iowan Old Style", "Palatino", Georgia, "Times New Roman", serif;
  --display-weight: 700;
  --display-tracking: -0.012em;
  --display-style: normal;
  --body: "Avenir Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-control: 6px;
  --r-card: 6px;
  --r-ticket: 4px;
  --ticket-shadow: 6px 6px 0 var(--selected), 12px 12px 0 var(--paper2);
  --card-shadow: 4px 4px 0 var(--selected);
  --ticket-notch: none;
  --wordmark-case: lowercase;
}
:root {
  --focus-ring: 3px solid var(--focus);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --type-caption: 0.8125rem;
  --type-body: 1rem;
  --type-lead: 1.25rem;
  --type-title: 1.75rem;
  --type-display: 2.5rem;
  --touch-min: 48px;
  /* Motion (ms). Reduced motion zeroes these below. */
  --motion-press: 80ms;
  --motion-release: 180ms;
  --motion-stage: 160ms;
  --motion-reveal: 240ms;
  --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* Pressed states: the transform and the fill a pressed control takes. */
  --press-y: 2px;
  --press-scale: 0.985;
  --press-transform: translateY(var(--press-y)) scale(var(--press-scale));
  --press-fill-action: var(--action-hover);
  --press-fill-quiet: var(--selected);
  --press-fill-danger: var(--selected);
  /* App shell: bottom tab bar at phone width, left rail from --nav-wide up. Tokens only. */
  --nav-height: 56px;
  --nav-item-min: 48px;
  --nav-label-size: 0.8125rem;
  --nav-indicator-size: 3px;
  --nav-rail-width: 232px;
  --nav-wide: 900px;
  --nav-bg: var(--surface);
  --nav-border: var(--line);
  --nav-ink: var(--muted);
  --nav-ink-active: var(--action);
  --nav-bg-active: var(--selected);
  --nav-indicator: var(--action);
  --nav-safe-bottom: env(safe-area-inset-bottom, 0px);
  /* Aliases so the website pages (styles.css + site-theme.css) keep rendering. --citron is NOT marigold here: marigold never appears on marketing chrome. */
  --bg: var(--canvas);
  --ink: var(--text);
  --iris: var(--action);
  --citron: var(--selected);
  --lavender: var(--selected);
  --white: var(--surface);
  font-family: var(--body);
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-press: 0ms;
    --motion-release: 0ms;
    --motion-stage: 0ms;
    --motion-reveal: 0ms;
    --press-y: 0px;
    --press-scale: 1;
  }
}