/* KaiTheme — scoped design layer for the Kai-family app pages (KaiCleaner, KaiReader).
   Everything is scoped under .kai so it can never leak into the studio homepage or BabyVocab.
   Palette is verbatim from the kai-brand style guide (KaiTheme tokens). */

body.kai {
  --kai-blue: #0a7afa;
  --kai-indigo: #3338f2;
  --kai-violet: #7d33f5;
  --kai-cyan: #33dbf5;
  --kai-gold-a: #fadd5e;
  --kai-gold-b: #f2a326;
  --kai-eyes: #1a1f42;
  --kai-ink: #f7f9fc;
  --kai-muted: #b9c2da;

  /* Calm luminous background instead of the studio's flat dark. */
  background:
    radial-gradient(1200px 720px at 80% -10%, #7d33f533 0, transparent 55%),
    radial-gradient(1000px 620px at 6% 6%, #0a7afa2b 0, transparent 52%),
    var(--bg);
  background-attachment: fixed;
}

body.kai .eyebrow { color: var(--kai-cyan); }

/* One calm card look everywhere — hairline border, soft shadow (mirrors kaiCard). */
.kai-card {
  border: 1px solid #ffffff14;
  border-radius: 20px;
  background: #ffffff08;
  box-shadow: 0 3px 12px #00000066;
  padding: 24px;
}

.kai-cta {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 750;
  text-decoration: none;
  color: #06101f;
  background: linear-gradient(120deg, var(--kai-cyan), var(--kai-blue));
}
.kai-cta:hover, .kai-cta:focus-visible { filter: brightness(1.08); color: #06101f; }

.kai-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #ffffff24;
  font: 800 11px/1 ui-monospace, monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--kai-cyan);
}

.kai-gold { color: var(--kai-gold-b); }