/* AUTOGENERATED FROM design/tokens.json BY packages/ui/scripts/tokens.ts
 * Do not hand-edit. Regenerate with `pnpm tokens`. */

:root {
  --pm-space-0: 0px;
  --pm-space-1: 4px;
  --pm-space-2: 8px;
  --pm-space-3: 12px;
  --pm-space-4: 16px;
  --pm-space-5: 20px;
  --pm-space-6: 24px;
  --pm-space-8: 32px;
  --pm-space-10: 40px;
  --pm-space-12: 48px;
  --pm-space-16: 64px;
  --pm-space-20: 80px;
  --pm-radius-xs: 8px;
  --pm-radius-sm: 14px;
  --pm-radius-md: 22px;
  --pm-radius-lg: 28px;
  --pm-radius-xl: 40px;
  --pm-radius-pill: 9999px;
  --pm-z-base: 0;
  --pm-z-canvas: 10;
  --pm-z-rail: 20;
  --pm-z-sheet: 40;
  --pm-z-overlay: 50;
  --pm-z-summon: 60;
  --pm-z-toast: 70;
  --pm-duration-instant: 0ms;
  --pm-duration-micro: 120ms;
  --pm-duration-quick: 200ms;
  --pm-duration-standard: 320ms;
  --pm-duration-expressive: 560ms;
  --pm-duration-ceremony: 3000ms;
  --pm-easing-standard: cubic-bezier(.2,.8,.2,1);
  --pm-easing-enter: cubic-bezier(.16,1,.3,1);
  --pm-easing-exit: cubic-bezier(.4,0,1,1);
  --pm-easing-ember: cubic-bezier(.33,0,.15,1);
  --pm-exit-ratio: 0.7;
  --pm-spring-snappy-stiffness: 500;
  --pm-spring-snappy-damping: 38;
  --pm-spring-smooth-stiffness: 260;
  --pm-spring-smooth-damping: 30;
  --pm-spring-gentle-stiffness: 140;
  --pm-spring-gentle-damping: 22;
  --pm-font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --pm-font-ui: 'Inter Tight', 'Segoe UI Variable', system-ui, sans-serif;
  --pm-font-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;
  --pm-size-xs: 12px;
  --pm-lh-xs: 16px;
  --pm-size-sm: 14px;
  --pm-lh-sm: 20px;
  --pm-size-md: 16px;
  --pm-lh-md: 24px;
  --pm-size-lg: 18px;
  --pm-lh-lg: 26px;
  --pm-size-xl: 20px;
  --pm-lh-xl: 28px;
  --pm-size-2xl: 24px;
  --pm-lh-2xl: 32px;
  --pm-size-3xl: 32px;
  --pm-lh-3xl: 38px;
  --pm-size-4xl: 44px;
  --pm-lh-4xl: 50px;
  --pm-size-5xl: 56px;
  --pm-lh-5xl: 60px;
  --pm-size-6xl: 72px;
  --pm-lh-6xl: 76px;
}

:root, [data-theme="dark"] {
  --pm-color-bg: #111118;
  --pm-color-surface-1: #17171f;
  --pm-color-surface-2: #1e1e28;
  --pm-color-surface-3: #262632;
  --pm-color-surface-4: #30303e;
  --pm-color-border: #2c2c38;
  --pm-color-border-strong: #6f6b64;
  --pm-color-text-strong: #fbf6ec;
  --pm-color-text: #f3ecdf;
  --pm-color-text-muted: #a8a194;
  --pm-color-accent: #c9a84c;
  --pm-color-accent-hover: #dcbd62;
  --pm-color-accent-contrast: #111118;
  --pm-color-accent-text: #d9b85a;
  --pm-color-signal: #e2733f;
  --pm-color-signal-text: #f0a07a;
  --pm-color-signal-soft: #3a2219;
  --pm-color-success: #7fc08f;
  --pm-color-warning: #e6b04a;
  --pm-color-danger: #e0707a;
  --pm-color-danger-fill: #8c2a31;
  --pm-color-danger-contrast: #fbf6ec;
  --pm-color-info: #8fb6e0;
  --pm-color-focus: #f6d68a;
  --pm-color-presence-core: #fff4d6;
  --pm-color-presence-mid: #f6d68a;
  --pm-color-presence-glow: #e2733f;
  --pm-color-presence-root: #8c2a31;
  --pm-color-night: #0b0b12;
  --pm-color-presence-agent-1: #f2c76b;
  --pm-color-presence-agent-2: #6cc4f0;
  --pm-color-presence-agent-3: #f08a4b;
  --pm-color-presence-agent-4: #c79ee8;
  --pm-color-presence-agent-5: #ef7f9a;
  --pm-color-presence-agent-6: #e9e2d2;
  --pm-color-presence-agent-7: #56c99c;
  --pm-color-presence-agent-8: #8fa6f5;
  --pm-elevation-e1: 0 1px 0 rgba(255,255,255,.03) inset, 0 1px 2px rgba(0,0,0,.40);
  --pm-elevation-e2: 0 1px 0 rgba(255,255,255,.04) inset, 0 2px 4px rgba(0,0,0,.35), 0 8px 16px rgba(0,0,0,.25);
  --pm-elevation-e3: 0 1px 0 rgba(255,255,255,.05) inset, 0 4px 8px rgba(0,0,0,.35), 0 16px 32px rgba(0,0,0,.30);
  --pm-elevation-e4: 0 1px 0 rgba(255,255,255,.06) inset, 0 8px 16px rgba(0,0,0,.40), 0 32px 64px rgba(0,0,0,.45);
}

[data-theme="light"] {
  --pm-color-bg: #f7f1e6;
  --pm-color-surface-1: #fffaf1;
  --pm-color-surface-2: #f0e8d9;
  --pm-color-surface-3: #e7dccb;
  --pm-color-surface-4: #dccfbb;
  --pm-color-border: #d9ccb6;
  --pm-color-border-strong: #8a7e6a;
  --pm-color-text-strong: #111118;
  --pm-color-text: #1f1c17;
  --pm-color-text-muted: #5f574b;
  --pm-color-accent: #7d5f10;
  --pm-color-accent-hover: #6a500b;
  --pm-color-accent-contrast: #fffaf1;
  --pm-color-accent-text: #7d5f10;
  --pm-color-signal: #b24d1c;
  --pm-color-signal-text: #a3441a;
  --pm-color-signal-soft: #f6dfd0;
  --pm-color-success: #2f6b3f;
  --pm-color-warning: #8a5a00;
  --pm-color-danger: #8c2a31;
  --pm-color-danger-fill: #8c2a31;
  --pm-color-danger-contrast: #fffaf1;
  --pm-color-info: #2b5f8f;
  --pm-color-focus: #7d5f10;
  --pm-color-presence-core: #fff4d6;
  --pm-color-presence-mid: #e9b95a;
  --pm-color-presence-glow: #d2622f;
  --pm-color-presence-root: #8c2a31;
  --pm-color-night: #1a1a22;
  --pm-color-presence-agent-1: #7d5f10;
  --pm-color-presence-agent-2: #1f6f99;
  --pm-color-presence-agent-3: #a9481a;
  --pm-color-presence-agent-4: #6f4399;
  --pm-color-presence-agent-5: #a3354f;
  --pm-color-presence-agent-6: #3f3a32;
  --pm-color-presence-agent-7: #1f7a55;
  --pm-color-presence-agent-8: #3a52b0;
  --pm-elevation-e1: 0 1px 2px rgba(40,30,15,.08);
  --pm-elevation-e2: 0 2px 4px rgba(40,30,15,.06), 0 8px 16px rgba(40,30,15,.06);
  --pm-elevation-e3: 0 4px 8px rgba(40,30,15,.07), 0 16px 32px rgba(40,30,15,.08);
  --pm-elevation-e4: 0 8px 16px rgba(40,30,15,.08), 0 32px 64px rgba(40,30,15,.12);
}

[data-theme="high-contrast"] {
  --pm-color-bg: #000000;
  --pm-color-surface-1: #0a0a0d;
  --pm-color-surface-2: #121217;
  --pm-color-surface-3: #1a1a20;
  --pm-color-surface-4: #24242b;
  --pm-color-border: #8f897c;
  --pm-color-border-strong: #d6cfbf;
  --pm-color-text-strong: #ffffff;
  --pm-color-text: #ffffff;
  --pm-color-text-muted: #dcd5c6;
  --pm-color-accent: #f4d272;
  --pm-color-accent-hover: #ffe08a;
  --pm-color-accent-contrast: #000000;
  --pm-color-accent-text: #f4d272;
  --pm-color-signal: #ffa06e;
  --pm-color-signal-text: #ffb38c;
  --pm-color-signal-soft: #2a160c;
  --pm-color-success: #9be0aa;
  --pm-color-warning: #ffd166;
  --pm-color-danger: #ff9aa2;
  --pm-color-danger-fill: #ff9aa2;
  --pm-color-danger-contrast: #000000;
  --pm-color-info: #a9d1ff;
  --pm-color-focus: #ffffff;
  --pm-color-presence-core: #ffffff;
  --pm-color-presence-mid: #ffe08a;
  --pm-color-presence-glow: #ffa06e;
  --pm-color-presence-root: #ff9aa2;
  --pm-color-night: #000000;
  --pm-color-presence-agent-1: #ffe08a;
  --pm-color-presence-agent-2: #9fdcff;
  --pm-color-presence-agent-3: #ffae80;
  --pm-color-presence-agent-4: #e0c4ff;
  --pm-color-presence-agent-5: #ffb0c2;
  --pm-color-presence-agent-6: #ffffff;
  --pm-color-presence-agent-7: #8ff0c6;
  --pm-color-presence-agent-8: #bccaff;
  --pm-elevation-e1: 0 1px 0 rgba(255,255,255,.03) inset, 0 1px 2px rgba(0,0,0,.40);
  --pm-elevation-e2: 0 1px 0 rgba(255,255,255,.04) inset, 0 2px 4px rgba(0,0,0,.35), 0 8px 16px rgba(0,0,0,.25);
  --pm-elevation-e3: 0 1px 0 rgba(255,255,255,.05) inset, 0 4px 8px rgba(0,0,0,.35), 0 16px 32px rgba(0,0,0,.30);
  --pm-elevation-e4: 0 1px 0 rgba(255,255,255,.06) inset, 0 8px 16px rgba(0,0,0,.40), 0 32px 64px rgba(0,0,0,.45);
}

[data-theme="simple"] {
  --pm-color-bg: #fbf6ec;
  --pm-color-surface-1: #ffffff;
  --pm-color-surface-2: #f3ebdc;
  --pm-color-surface-3: #e9dfcc;
  --pm-color-surface-4: #ddd0b9;
  --pm-color-border: #8f8370;
  --pm-color-border-strong: #3f3a32;
  --pm-color-text-strong: #111118;
  --pm-color-text: #16140f;
  --pm-color-text-muted: #3f3a32;
  --pm-color-accent: #111118;
  --pm-color-accent-hover: #2a2a33;
  --pm-color-accent-contrast: #fbf6ec;
  --pm-color-accent-text: #6b500a;
  --pm-color-signal: #9e3f12;
  --pm-color-signal-text: #8a360f;
  --pm-color-signal-soft: #f6dccd;
  --pm-color-success: #1f5a30;
  --pm-color-warning: #6e4700;
  --pm-color-danger: #7a2229;
  --pm-color-danger-fill: #7a2229;
  --pm-color-danger-contrast: #ffffff;
  --pm-color-info: #1f4f7a;
  --pm-color-focus: #111118;
  --pm-color-presence-core: #fff4d6;
  --pm-color-presence-mid: #e9b95a;
  --pm-color-presence-glow: #d2622f;
  --pm-color-presence-root: #8c2a31;
  --pm-color-night: #1a1a22;
  --pm-color-presence-agent-1: #7d5f10;
  --pm-color-presence-agent-2: #1f6f99;
  --pm-color-presence-agent-3: #a9481a;
  --pm-color-presence-agent-4: #6f4399;
  --pm-color-presence-agent-5: #a3354f;
  --pm-color-presence-agent-6: #3f3a32;
  --pm-color-presence-agent-7: #1f7a55;
  --pm-color-presence-agent-8: #3a52b0;
  --pm-elevation-e1: 0 1px 2px rgba(40,30,15,.08);
  --pm-elevation-e2: 0 2px 4px rgba(40,30,15,.06), 0 8px 16px rgba(40,30,15,.06);
  --pm-elevation-e3: 0 4px 8px rgba(40,30,15,.07), 0 16px 32px rgba(40,30,15,.08);
  --pm-elevation-e4: 0 8px 16px rgba(40,30,15,.08), 0 32px 64px rgba(40,30,15,.12);
}

:root {
  --pm-agent-1-role: "Conductor";
  --pm-agent-1-glyph: "diamond";
  --pm-agent-2-role: "Researcher";
  --pm-agent-2-glyph: "search";
  --pm-agent-3-role: "Builder";
  --pm-agent-3-glyph: "square";
  --pm-agent-4-role: "Scribe";
  --pm-agent-4-glyph: "pen";
  --pm-agent-5-role: "Critic";
  --pm-agent-5-glyph: "scales";
  --pm-agent-6-role: "Sentinel";
  --pm-agent-6-glyph: "shield";
  --pm-agent-7-role: "Custom A";
  --pm-agent-7-glyph: "hexagon";
  --pm-agent-8-role: "Custom B";
  --pm-agent-8-glyph: "triangle";
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --pm-duration-micro: 0ms;
    --pm-duration-quick: 0ms;
    --pm-duration-standard: 0ms;
    --pm-duration-expressive: 0ms;
    --pm-duration-ceremony: 0ms;
  }
}

/* The companion PWA (spec 01 §8.12): approvals first, flawless at 390 px.
   Built on the product tokens (packages/ui tokens.css, prepended at build). */
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--pm-color-bg); color: var(--pm-color-text); font-family: var(--pm-font-ui); }
main { max-width: 480px; margin: 0 auto; padding: max(20px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom)); }
h1 { font-family: var(--pm-font-display); font-size: 26px; line-height: 1.2; margin: 8px 0 6px; color: var(--pm-color-text-strong); }
p { line-height: 1.5; margin: 6px 0; }
.muted { color: var(--pm-color-text-muted); }
.presence { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--pm-color-text-muted); margin-bottom: 10px; }
.dot { width: 8px; height: 8px; border-radius: 9999px; background: var(--pm-color-text-muted); }
.dot.on { background: var(--pm-color-success); }
.card { background: var(--pm-color-surface-2); border: 1px solid var(--pm-color-border); border-radius: 24px; padding: 18px; margin: 14px 0; }
.card h2 { font-size: 17px; margin: 0 0 6px; color: var(--pm-color-text-strong); }
.what { font-family: var(--pm-font-mono); font-size: 13px; background: var(--pm-color-surface-3); border-radius: 16px; padding: 10px 12px; overflow-wrap: anywhere; white-space: pre-wrap; margin: 10px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.chip { font-size: 12px; padding: 4px 10px; border-radius: 9999px; background: var(--pm-color-surface-3); color: var(--pm-color-text); }
.chip.high { background: var(--pm-color-danger-fill); color: var(--pm-color-danger-contrast); }
.row { display: flex; gap: 10px; margin-top: 12px; }
button { flex: 1; min-height: 52px; border-radius: 9999px; border: 1px solid var(--pm-color-border-strong); background: var(--pm-color-surface-3); color: var(--pm-color-text-strong); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
button.primary { background: var(--pm-color-accent); color: var(--pm-color-accent-contrast); border-color: transparent; }
button:disabled { opacity: 0.5; cursor: default; }
button:focus-visible, textarea:focus-visible { outline: 2px solid var(--pm-color-focus); outline-offset: 2px; }
textarea { width: 100%; min-height: 110px; border-radius: 16px; border: 1px solid var(--pm-color-border); background: var(--pm-color-surface-1); color: var(--pm-color-text); font-family: var(--pm-font-mono); font-size: 12px; padding: 10px; }
.error { color: var(--pm-color-danger); }
.empty { text-align: center; padding: 36px 0; }
@media (prefers-reduced-motion: no-preference) { .card { animation: in var(--pm-duration-standard, 240ms) var(--pm-easing-enter, ease-out); } @keyframes in { from { opacity: 0; transform: translateY(6px); } } }