/* CraveFX kiosk — shared design tokens & primitives.
   Palette sampled from Klaire: deep aubergine, lavender, and an orange accent. */

/* Friendly, rounded type — bundled locally so the kiosk needs no font CDN.
   Nunito for body/UI (warm + very legible), Quicksand for display. */
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/static/fonts/nunito-400.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/static/fonts/nunito-600.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("/static/fonts/nunito-700.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 800;
  font-display: swap; src: url("/static/fonts/nunito-800.woff2") format("woff2"); }
@font-face { font-family: "Quicksand"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/static/fonts/quicksand-600.woff2") format("woff2"); }
@font-face { font-family: "Quicksand"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("/static/fonts/quicksand-700.woff2") format("woff2"); }

:root {
  --bg-0: #140a24;
  --bg-1: #1e0f38;
  --bg-2: #2a1550;
  --plum: #3a1e66;
  --purple: #7c4dbc;
  --purple-bright: #9a6cff;
  --lavender: #c9b6f2;
  --lilac: #e9defb;
  --accent: #ff8a3d;
  --accent-soft: #ffb27a;
  --ink: #f6f1ff;
  --ink-dim: #b8a8d8;
  --ink-faint: #8a7bb0;
  --glass: rgba(38, 20, 66, 0.55);
  --glass-brd: rgba(201, 182, 242, 0.18);
  --shadow: 0 24px 70px -20px rgba(0, 0, 0, 0.65);
  --radius: 26px;
  --font: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-display: "Quicksand", "Nunito", -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Ambient animated backdrop shared by both surfaces */
.ambient { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.ambient::before {
  content: "";
  position: absolute; inset: -20%;
  background:
    radial-gradient(40% 50% at 20% 25%, rgba(124, 77, 188, 0.55), transparent 70%),
    radial-gradient(45% 55% at 82% 30%, rgba(154, 108, 255, 0.35), transparent 72%),
    radial-gradient(60% 60% at 60% 100%, rgba(255, 138, 61, 0.16), transparent 70%),
    linear-gradient(160deg, var(--bg-1), var(--bg-0) 60%);
  animation: drift 4.5s var(--ease) infinite alternate;
}
.ambient .orb {
  position: absolute; border-radius: 50%;
  filter: blur(48px); opacity: 0.5; mix-blend-mode: screen;
  animation: float 4s ease-in-out infinite;
}
.ambient .orb.a { width: 380px; height: 380px; left: 8%; top: 18%;
  background: radial-gradient(circle, #8a5cff, transparent 70%); }
.ambient .orb.b { width: 300px; height: 300px; right: 12%; top: 12%;
  background: radial-gradient(circle, #ff8a3d, transparent 70%); animation-delay: -6s; opacity: 0.3; }
.ambient .orb.c { width: 460px; height: 460px; left: 40%; bottom: -12%;
  background: radial-gradient(circle, #5a2ea0, transparent 70%); animation-delay: -12s; }
.ambient .grain {
  position: absolute; inset: 0; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

@keyframes drift {
  0% { transform: translate3d(-2%, -1%, 0) scale(1.02); }
  100% { transform: translate3d(2%, 2%, 0) scale(1.08); }
}

/* Thinking — while Klaire is processing, the ambient cools from warm plum to an
   electric blue/violet and pulses faster, so the whole scene signals she's
   working (this replaces the old "…" indicator). */
.ambient::before { transition: filter 0.7s var(--ease); }
.ambient .orb { transition: background 0.7s var(--ease), opacity 0.7s var(--ease); }
body.is-thinking .ambient::before {
  background:
    radial-gradient(42% 52% at 24% 26%, rgba(64, 196, 255, 0.42), transparent 70%),
    radial-gradient(48% 55% at 80% 30%, rgba(128, 112, 255, 0.5), transparent 72%),
    radial-gradient(62% 60% at 56% 100%, rgba(74, 120, 255, 0.26), transparent 70%),
    linear-gradient(160deg, #131a44, #0c0a20 62%);
  animation: thinkpulse 1.5s var(--ease) infinite alternate;
}
body.is-thinking .ambient .orb { animation-duration: 1.9s; opacity: 0.6; }
body.is-thinking .ambient .orb.a { background: radial-gradient(circle, #4cc6ff, transparent 70%); }
body.is-thinking .ambient .orb.b { background: radial-gradient(circle, #8a7cff, transparent 70%); opacity: 0.55; }
body.is-thinking .ambient .orb.c { background: radial-gradient(circle, #3a72e6, transparent 70%); }
@keyframes thinkpulse {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1.04); opacity: 0.82; }
  100% { transform: translate3d(2%, 2%, 0) scale(1.11); opacity: 1; }
}
@keyframes float {
  0%, 100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0, -40px, 0); }
}

/* Buttons */
.btn { font-family: inherit; cursor: pointer; border: none; color: var(--ink); }
.chip {
  font-family: inherit; cursor: pointer;
  border: 1px solid var(--glass-brd);
  background: rgba(201, 182, 242, 0.08);
  color: var(--lavender);
  padding: 9px 15px; border-radius: 999px;
  font-size: 14px; font-weight: 600; letter-spacing: 0.2px;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
  white-space: nowrap;
}
.chip:hover, .chip:active { background: var(--accent); color: #2a1206; border-color: transparent; transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .ambient::before, .ambient .orb,
  body.is-thinking .ambient::before, body.is-thinking .ambient .orb { animation: none; }
}