/* Agave Studio design tokens. Rule: no blue anywhere. Graphite + silver + one ember accent. */
:root {
  --bg: #08080a;
  --bg-2: #0e0e11;
  --panel: rgba(22, 22, 26, 0.72);
  --line: rgba(235, 232, 226, 0.09);
  --line-2: rgba(235, 232, 226, 0.16);
  --ink: #f2efe9;
  --ink-2: #b9b5ad;
  --ink-3: #77736c;
  --silver-1: #f4f2ee;
  --silver-2: #c9c6c0;
  --silver-3: #8d8a85;
  --ember: #ff6b3d;
  --ember-2: #ffb36b;
  --ok: #9fd18b;
  --warn: #ffcf6b;
  --err: #ff6b6b;
  --radius: 18px;
  --radius-lg: 28px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --font-sans: "Geist", "Inter", system-ui, -apple-system, sans-serif;
  --font-serif: "Instrument Serif", "Times New Roman", serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
  color-scheme: dark;
}

/* Dark frosted silver pill: the one primary button style across the product. */
.pill {
  --h: 48px;
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  height: var(--h); padding: 0 24px; border-radius: 999px;
  font: 500 15px/1 var(--font-sans); letter-spacing: -0.01em; color: var(--silver-1);
  text-decoration: none; cursor: pointer; border: 0; isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04) 46%, rgba(255,255,255,0.02) 54%, rgba(255,255,255,0.08)),
    rgba(30, 30, 34, 0.55);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(255,255,255,0.06),
    0 0 0 1px rgba(220,218,214,0.22),
    0 10px 30px -10px rgba(0,0,0,0.8);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
  overflow: hidden;
}
.pill::before { /* moving specular sheen */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.28) 48%, transparent 62%);
  transform: translateX(-120%); transition: transform 1s var(--ease-out);
}
.pill:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(255,255,255,0.08), 0 0 0 1px rgba(240,238,234,0.38), 0 18px 40px -12px rgba(0,0,0,0.9); }
.pill:hover::before { transform: translateX(120%); }
.pill:active { transform: translateY(0) scale(.98); }
.pill:focus-visible { outline: 2px solid var(--silver-1); outline-offset: 3px; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 12px var(--ember); }
.pill.sm { --h: 38px; padding: 0 16px; font-size: 14px; }
.pill.lg { --h: 58px; padding: 0 30px; font-size: 17px; }

.ghost {
  display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 20px; border-radius: 999px;
  color: var(--ink-2); text-decoration: none; font: 500 15px/1 var(--font-sans); border: 1px solid var(--line-2);
  transition: color .3s, border-color .3s, background .3s;
}
.ghost:hover { color: var(--ink); border-color: rgba(235,232,226,.32); background: rgba(255,255,255,.03); }