/* Kayser — Design tokens (chat-first, dark, glass aesthetic)
 * Source of truth: design system bundle from claude design (2026-05-28).
 * Lift values verbatim — colors, spacing, radii, type scale are final.
 */

:root {
  /* ---------- Type stacks ---------- */
  --kx-font-ui:    system-ui, -apple-system, "Segoe UI", sans-serif;
  --kx-font-brand: "Inter Tight", system-ui, sans-serif;
  --kx-font-mono:  ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* ---------- Brand ---------- */
  --kx-brand:        #7c3aed;
  --kx-brand-soft:   rgba(124, 58, 237, .14);
  --kx-brand-deep:   #5b21b6;

  /* ---------- Surfaces (sit over the wallpaper gradient) ---------- */
  --kx-glass:        rgba(20, 14, 38, .55);
  --kx-glass-hi:     rgba(255, 255, 255, .08);
  --kx-glass-line:   rgba(255, 255, 255, .10);
  --kx-glass-sheet:  rgba(18, 12, 32, .82);
  --kx-glass-input:  rgba(255, 255, 255, .07);

  /* ---------- Text on glass ---------- */
  --kx-ink:     rgba(255, 255, 255, .96);
  --kx-ink-2:   rgba(255, 255, 255, .72);
  --kx-ink-3:   rgba(255, 255, 255, .50);
  --kx-ink-dim: rgba(255, 255, 255, .32);

  /* ---------- Action colors ---------- */
  --kx-approve: #34d399;
  --kx-edit:    #60a5fa;
  --kx-reject:  #fb7185;
  --kx-warn:    #fbbf24;

  /* ---------- Chips ---------- */
  --kx-chip-bg:        rgba(255, 255, 255, .08);
  --kx-chip-bg-active: rgba(255, 255, 255, .16);

  /* ---------- Wallpaper ---------- */
  --kx-wallpaper:
    radial-gradient(ellipse 90% 70% at 15% 0%,  rgba(76, 29, 149, .35) 0%, transparent 55%),
    radial-gradient(ellipse 80% 60% at 100% 25%, rgba(91, 33, 182, .28) 0%, transparent 55%),
    radial-gradient(ellipse 100% 70% at 50% 100%, rgba(30, 27, 75, .55) 0%, transparent 60%),
    linear-gradient(180deg, #0d0820 0%, #060311 100%);

  /* ---------- Spacing (strict 4px grid) ---------- */
  --kx-space-1:  4px;
  --kx-space-2:  8px;
  --kx-space-3:  12px;
  --kx-space-4:  16px;
  --kx-space-5:  20px;
  --kx-space-6:  24px;
  --kx-space-8:  32px;
  --kx-space-12: 48px;

  /* ---------- Radius ---------- */
  --kx-radius-sm:   8px;
  --kx-radius-md:   12px;
  --kx-radius-lg:   16px;
  --kx-radius-xl:   24px;
  --kx-radius-pill: 9999px;

  /* ---------- Type scale ---------- */
  --kx-text-xs:   11px;
  --kx-text-sm:   13px;
  --kx-text-base: 15px;
  --kx-text-lg:   17px;
  --kx-text-xl:   22px;
  --kx-text-2xl:  28px;

  /* ---------- Line height ---------- */
  --kx-lh-tight: 1.3;
  --kx-lh-body:  1.45;

  /* ---------- Shadows ---------- */
  --kx-shadow-lift:  0 6px 18px rgba(124, 58, 237, .35);
  --kx-shadow-glass: 0 30px 80px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .08);
}

/* ── Glass surface recipes ───────────────────────────────────────── */
.kx-glass {
  background: var(--kx-glass);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  border: 1px solid var(--kx-glass-line);
  border-radius: var(--kx-radius-lg);
}

.kx-glass-thin {
  background: var(--kx-glass-input);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--kx-glass-line);
  border-radius: var(--kx-radius-md);
}

/* ── Type helpers ────────────────────────────────────────────────── */
.kx-body {
  font-family: var(--kx-font-ui);
  font-size: var(--kx-text-base);
  line-height: var(--kx-lh-body);
  color: var(--kx-ink);
  background: #0d0820;
}

.kx-brand { font-family: var(--kx-font-brand); letter-spacing: -0.3px; }
.kx-mono  { font-family: var(--kx-font-mono); font-variant-numeric: tabular-nums; }

.kx-eyebrow {
  font-family: var(--kx-font-mono);
  font-size: 10px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--kx-ink-3);
}