/*
 * theme.css — Nudge & Reply's design-system values.
 * Warm paper + deep teal ink, bold-geometric flat greens for a WhatsApp
 * workshop landing page. Opens light; a full dark set lives under
 * html[data-theme="dark"]. --x-night-* is this app's own token, used only by
 * the closing statement band, which stays a deep night-teal in EITHER mode.
 */

:root {
  --canvas: #f2ece1;
  --surface: #f9f6f2;
  --surface-2: #e9e0cd;
  --border: #ddd0b6;
  --border-strong: #c2ab84;
  --ink: #1c1b16;
  --muted: #615e57;

  --accent: #1faf66;
  --accent-hover: #189258;
  --accent-ink: #0f2e20;
  --accent-text: #0c4a3e;
  --accent-strong: #136a3e;
  --accent-soft: #e2f3e6;
  --accent-border: #a9d9bb;

  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dcefe0;
  --success-strong: #136a3e;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f3e6d5;
  --warning-strong: #8a3f07;
  --danger: #b3261e;
  --danger-ink: #ffffff;
  --danger-soft: #f6dedb;
  --danger-strong: #8c1d17;

  --chart-1: #1faf66;
  --chart-2: #136a3e;
  --chart-3: #c2883a;
  --chart-4: #0c4a3e;
  --chart-5: #8a6d3c;
  --chart-6: #4c7a63;

  /* This app's own token: the closing statement band is always a deep
     night-teal, in either mode. */
  --x-night-bg: #0f2620;
  --x-night-surface: #16332a;
  --x-night-ink: #f4ede0;
  --x-night-muted: #b9ab8f;
  --x-night-accent: #57e39c;

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 700;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.06em;

  --radius-btn: 10px;
  --radius-card: 14px;
  --radius-input: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --border-w: 1.5px;
  --border-strong-w: 2px;
  --btn-weight: 700;
  --caps: none;
  --card-pad: 1.75rem;
  --measure: 62ch;
  --shadow-card: 0 10px 24px -14px color-mix(in srgb, var(--ink) 45%, transparent), 0 2px 0 0 color-mix(in srgb, var(--ink) 6%, transparent);
  --shadow-raised: 0 20px 45px -18px color-mix(in srgb, var(--ink) 50%, transparent);
  --shadow-btn: 0 3px 0 0 color-mix(in srgb, var(--ink) 20%, transparent);
}

html[data-theme="dark"] {
  --canvas: #16211d;
  --surface: #1e2b26;
  --surface-2: #27362f;
  --border: #33453c;
  --border-strong: #4c664f;
  --ink: #f3ece0;
  --muted: #a9a08e;

  --accent: #34c37f;
  --accent-hover: #2ca86c;
  --accent-ink: #0b2015;
  --accent-text: #7fe3ab;
  --accent-strong: #8fe3b4;
  --accent-soft: #1f3a2c;
  --accent-border: #3f6a51;

  --success: #34c37f;
  --success-ink: #0b2015;
  --success-soft: #1f3a2c;
  --success-strong: #8fe3b4;
  --warning: #d68a3d;
  --warning-ink: #241202;
  --warning-soft: #3a2a15;
  --warning-strong: #e8b073;
  --danger: #e2685c;
  --danger-ink: #2a0a07;
  --danger-soft: #3a1613;
  --danger-strong: #f0958b;

  --chart-1: #34c37f;
  --chart-2: #8fe3b4;
  --chart-3: #d6a24a;
  --chart-4: #7fe3ab;
  --chart-5: #c2883a;
  --chart-6: #8fae9c;

  --x-night-bg: #081714;
  --x-night-surface: #102420;
  --x-night-ink: #f4ede0;
  --x-night-muted: #b9ab8f;
  --x-night-accent: #57e39c;

  --shadow-card: 0 10px 26px -14px rgba(0, 0, 0, 0.55), 0 2px 0 0 rgba(0, 0, 0, 0.2);
  --shadow-raised: 0 22px 50px -18px rgba(0, 0, 0, 0.6);
  --shadow-btn: 0 3px 0 0 rgba(0, 0, 0, 0.35);
}

/*
 * app.css — Nudge & Reply's own CSS. The one screen that makes this app
 * itself is the WhatsApp-flow graphic language: circular nodes connected by
 * lines, and the incoming/outgoing chat bubbles that carry the workshop
 * copy. Everything here reads tokens only. Ships nothing generic.
 */

/* ---- Ground: a faint warm dot-grid, echoing the flow-diagram's nodes ---- */
.app-ground {
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 10%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: -11px -11px;
}

/* ---- Wordmark mark --------------------------------------------------- */
.mark {
  @apply inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-accent text-accent-ink;
  box-shadow: var(--shadow-btn, none);
}

/* ---- Flow diagram: three circular nodes, connected by lines ---------- */
.flow-diagram {
  @apply flex flex-nowrap items-start justify-center gap-2 sm:gap-4;
}
.flow-node-circle {
  @apply mx-auto flex size-16 items-center justify-center rounded-full bg-surface text-ink sm:size-20;
  border: var(--border-strong-w, 2px) solid var(--border-strong);
  box-shadow: var(--shadow-card, none);
}
.flow-node-circle-accent {
  @apply border-accent bg-accent text-accent-ink;
}
.flow-node-label {
  text-wrap: balance;
}
.flow-line {
  @apply mt-8 h-0.5 flex-1 self-start sm:mt-10;
  min-width: 0.75rem;
  max-width: 3.5rem;
  background: var(--border-strong);
  position: relative;
}
.flow-dot {
  @apply absolute left-1/2 top-1/2 size-2 rounded-full bg-accent;
  transform: translate(-50%, -50%);
}

/* ---- Chat bubbles: the logistics message and the confirmation ------- */
.chat-bubble {
  @apply relative max-w-[30rem] rounded-2xl bg-surface px-5 py-4 text-ink;
  border: var(--border-strong-w, 2px) solid var(--border);
  border-bottom-left-radius: 0.25rem;
  box-shadow: var(--shadow-card, none);
}
.chat-bubble-out {
  @apply ml-auto bg-accent-soft text-ink;
  border-color: var(--accent-border);
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 0.25rem;
}
.chat-bubble-time {
  @apply mt-2 flex items-center justify-end gap-1 text-xs text-muted;
}

/* ---- Build-sequence numerals: outlined, poster-scale ------------------ */
.step-num {
  @apply shrink-0 font-display text-6xl font-bold leading-none;
  color: color-mix(in srgb, var(--accent-strong) 42%, transparent);
}

/* ---- Closing band: always a deep night-teal, in either mode ---------- */
.band-night {
  background: radial-gradient(120% 140% at 50% -10%, color-mix(in srgb, var(--x-night-accent) 16%, transparent), transparent 60%), var(--x-night-bg);
  color: var(--x-night-ink);
}
.band-night-accent { color: var(--x-night-accent); }

/* ---- Composer: the message-styled registration form ------------------ */
.composer {
  @apply overflow-hidden rounded-2xl bg-surface;
  border: var(--border-strong-w, 2px) solid var(--border);
  box-shadow: var(--shadow-card, none);
}
.composer-bar {
  @apply flex items-center gap-3 border-b px-5 py-3 text-sm text-muted;
  background: var(--surface-2);
  border-color: var(--border);
  border-bottom-width: var(--border-w, 1px);
}
.composer-form {
  @apply p-6 sm:p-8;
}
.composer-sent {
  @apply p-6 sm:p-8;
}

/* ---- Hero entrance: the ONE moment that moves on this page ------------ */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.hero-enter {
  animation: hero-rise 640ms var(--ease-out, ease) both;
}
.hero-enter-1 { animation-delay: 0ms; }
.hero-enter-2 { animation-delay: 90ms; }
.hero-enter-3 { animation-delay: 180ms; }
.hero-enter-4 { animation-delay: 260ms; }
.hero-enter-5 { animation-delay: 360ms; }

@media (max-width: 640px) {
  .chat-bubble { max-width: 100%; }
}