/* ────────────────────────────────────────────────────────────
   PULSE — design tokens (v3.2)
   Cool deep dark · electric mint pulse · category secondaries
   ────────────────────────────────────────────────────────── */

:root {
  /* surfaces — deep cool near-black, slight blue lean */
  --surface:        oklch(0.135 0.008 250);
  --surface-2:      oklch(0.165 0.008 250);
  --panel:          oklch(0.190 0.008 250);
  --panel-2:        oklch(0.230 0.008 250);
  --panel-hi:       oklch(0.290 0.008 250);
  --line:           oklch(1 0 0 / 0.06);
  --line-strong:    oklch(1 0 0 / 0.13);

  /* text */
  --ink:            oklch(0.985 0.004 250);
  --ink-2:          oklch(0.82 0.006 250);
  --ink-3:          oklch(0.58 0.008 250);
  --ink-4:          oklch(0.42 0.008 250);

  /* signature pulse — warm ember · alive, lit */
  --pulse:          oklch(0.74 0.20 32);
  --pulse-hi:       oklch(0.82 0.20 32);
  --pulse-soft:     oklch(0.74 0.20 32 / 0.16);
  --pulse-tint:     oklch(0.74 0.20 32 / 0.08);

  /* cool wire — secondary blue */
  --cool:           oklch(0.74 0.13 250);
  --cool-soft:      oklch(0.74 0.13 250 / 0.16);

  /* state categories — distinct hues, all bright and saturated */
  --cat-idle:       oklch(0.86 0.13 170);
  --cat-action:     oklch(0.85 0.15  72);
  --cat-effect:     oklch(0.76 0.19  28);
  --cat-transition: oklch(0.74 0.13 245);
  --cat-twopart:    oklch(0.74 0.17 305);

  /* radii */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 9999px;

  /* type */
  --font-display: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --font-ui: "Geist", -apple-system, BlinkMacSystemFont, "Inter Tight", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* shadow */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 1px 0 oklch(1 0 0 / 0.03) inset;
  --shadow-md: 0 8px 28px -8px rgba(0,0,0,0.55);
  --shadow-lg: 0 24px 64px -16px rgba(0,0,0,0.65);
  --shadow-pulse: 0 0 0 1px var(--pulse), 0 0 40px -8px oklch(0.86 0.16 168 / 0.55);
}

/* light "paper" mode */
:root.theme-paper {
  --surface:        oklch(0.975 0.005 250);
  --surface-2:      oklch(0.945 0.008 250);
  --panel:          oklch(0.985 0.004 250);
  --panel-2:        oklch(0.935 0.008 250);
  --panel-hi:       oklch(0.90 0.010 250);
  --line:           oklch(0.18 0.008 250 / 0.10);
  --line-strong:    oklch(0.18 0.008 250 / 0.20);
  --ink:            oklch(0.18 0.008 250);
  --ink-2:          oklch(0.34 0.008 250);
  --ink-3:          oklch(0.50 0.008 250);
  --ink-4:          oklch(0.62 0.008 250);
  --pulse:          oklch(0.62 0.18 168);
  --pulse-hi:       oklch(0.52 0.20 168);
  --shadow-md: 0 8px 28px -8px rgba(0,40,30,0.10);
  --shadow-lg: 0 24px 64px -16px rgba(0,40,30,0.18);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overflow-x: hidden; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--pulse-soft); color: var(--ink); }

/* utility */
.mono { font-family: var(--font-mono); }
.serif { font-family: var(--font-display); }
.italic { font-style: italic; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

.h-display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.025em;
}

/* the pulse — actual pulse animation, dual ring */
@keyframes pulse-glow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5;  transform: scale(0.7); }
}
@keyframes pulse-ring {
  0%   { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(2.4); opacity: 0; }
}
.pulse-dot {
  position: relative;
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--pulse);
  flex-shrink: 0;
  animation: pulse-glow 1.6s var(--ease) infinite;
}
.pulse-dot::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 999px;
  background: var(--pulse);
  animation: pulse-ring 1.6s var(--ease) infinite;
}

/* primary button */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--surface);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: -0.005em;
  transition: transform 0.18s var(--ease), background 0.18s var(--ease), box-shadow 0.18s var(--ease);
  border: 1px solid transparent;
  box-shadow: var(--shadow-sm);
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.btn-pulse {
  background: var(--pulse);
  color: oklch(0.12 0.01 250);
  box-shadow: 0 0 0 1px oklch(from var(--pulse) l c h / 0.2), 0 8px 20px -8px oklch(from var(--pulse) l c h / 0.55);
}
.btn-pulse:hover { background: var(--pulse-hi); box-shadow: 0 0 0 1px oklch(from var(--pulse) l c h / 0.3), 0 12px 28px -8px oklch(from var(--pulse) l c h / 0.7); }
.btn-ghost {
  background: oklch(1 0 0 / 0.04);
  color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: none;
}
.btn-ghost:hover { background: oklch(1 0 0 / 0.07); border-color: oklch(1 0 0 / 0.20); }
.btn-sm { padding: 8px 14px; font-size: 12.5px; }

/* chip */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: oklch(1 0 0 / 0.04);
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-2);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  transition: all 0.15s var(--ease);
}
.chip:hover { background: oklch(1 0 0 / 0.07); color: var(--ink); }
.chip-active {
  background: var(--pulse-soft);
  border-color: var(--pulse);
  color: var(--pulse-hi);
}

/* card */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

/* category swatch */
.cat-dot { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; }
.cat-idle       { background: var(--cat-idle); }
.cat-action     { background: var(--cat-action); }
.cat-effect     { background: var(--cat-effect); }
.cat-transition { background: var(--cat-transition); }
.cat-twopart    { background: var(--cat-twopart); }

/* divider */
.hr { height: 1px; background: var(--line); border: 0; }

/* scrollbar */
.scroller { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.scroller::-webkit-scrollbar { width: 6px; }
.scroller::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }

/* ambient pulse ring used by avatar-live polish */
@keyframes ambient-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1.0); }
  50%      { opacity: 0.85; transform: scale(1.012); }
}
@keyframes scene-tick {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}