/*
 * theme.css — Version Test Chai.
 * Palette: kadak-chai brown ink, cream cup-froth ground, one terracotta
 * (cardamom-and-clay) accent. Light opens; dark is a lamp-lit kitchen at 5am.
 */

:root {
  --canvas: #fbf3e6;
  --surface: #fffaf1;
  --surface-2: #f3e6d2;
  --border: #e3d2b8;
  --border-strong: #c9b08d;
  --ink: #2b1a10;
  --muted: #6b5240;
  --accent: #a8451a;
  --accent-hover: #8f3813;
  --accent-ink: #fffaf1;
  --accent-text: #a8451a;
  --accent-strong: #7a300f;
  --accent-soft: #f4dcc2;
  --accent-border: #dfb890;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dfebe3;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f2e6dd;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f2dfdf;
  --danger-strong: #b91c1c;
  --chart-1: #a8451a;
  --chart-2: #7c285c;
  --chart-3: #7c350c;
  --chart-4: #425605;
  --chart-5: #0b5668;
  --chart-6: #5152a5;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 700;
  --display-tracking: -0.03em;
  --eyebrow-tracking: 0.08em;

  --radius-btn: 999px;
  --radius-card: 1.5rem;
}

html[data-theme="dark"] {
  --canvas: #1c120c;
  --surface: #281a12;
  --surface-2: #33231a;
  --border: #45311f;
  --border-strong: #6a4f36;
  --ink: #f8ebd9;
  --muted: #bda58f;
  --accent: #e8813f;
  --accent-hover: #f09454;
  --accent-ink: #1c120c;
  --accent-text: #f29a5c;
  --accent-strong: #f5b47f;
  --accent-soft: #3d2618;
  --accent-border: #6b4229;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #172f22;
  --success-strong: #58a474;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #3a2517;
  --warning-strong: #ca854f;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #3b191b;
  --danger-strong: #d57575;
  --chart-1: #e8813f;
  --chart-2: #cb70a4;
  --chart-3: #be6436;
  --chart-4: #98911a;
  --chart-5: #159670;
  --chart-6: #1c9ec8;
}

/*
 * app.css — the one screen that makes Version Test Chai itself:
 * the steaming cup in the hero. Tokens only.
 */

.cup {
  width: min(100%, 18rem);
  height: auto;
  overflow: visible;
}

.cup-saucer {
  fill: var(--accent-soft);
  stroke: var(--ink);
  stroke-width: 3;
}

.cup-body {
  fill: var(--surface);
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linejoin: round;
}

.cup-handle {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
}

.cup-tea {
  fill: var(--accent);
}

.cup-steam {
  fill: none;
  stroke: var(--muted);
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0;
  animation: steam-rise 4.5s ease-in-out infinite;
}

.cup-steam:nth-of-type(2) {
  animation-delay: 1.2s;
}

.cup-steam:nth-of-type(3) {
  animation-delay: 2.4s;
}

@keyframes steam-rise {
  0% {
    opacity: 0;
    transform: translateY(14px);
  }
  30% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    transform: translateY(-16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cup-steam {
    animation: none;
    opacity: 0.6;
  }
}

.hero-glow {
  background: radial-gradient(ellipse at 50% 0%, var(--accent-soft), transparent 70%);
}