/*
 * theme.css — Two Blue Ticks. A near-black command-centre: send-green glows
 * off dark surfaces, the WhatsApp read-receipt blue (--chart-2) does one job
 * only — ticks in the proof transcript. Opens dark; a legible light mode
 * sits under html[data-theme="light"].
 */

:root {
  color-scheme: dark;

  --canvas: #0a1512;
  --surface: #232c2a;
  --surface-2: #2c3733;
  --border: #33413c;
  --border-strong: #46564f;
  --ink: #d8e3dd;
  --muted: #99a39e;

  --accent: #f3f5f1;
  --accent-hover: #dfe3dc;
  --accent-ink: #0a1512;
  --accent-text: #34e28a;
  --accent-strong: #f3f5f1;
  --accent-soft: #12241c;
  --accent-border: #2f6b4c;

  --success: #34e28a;
  --success-ink: #06150f;
  --success-soft: #12241c;
  --success-strong: #5eeca5;

  --warning: #f5a524;
  --warning-ink: #1c1305;
  --warning-soft: #2c2110;
  --warning-strong: #f8c069;

  --danger: #ef4444;
  --danger-ink: #1c0808;
  --danger-soft: #2c1414;
  --danger-strong: #f28282;

  --chart-1: #34e28a;
  --chart-2: #34b7f1;
  --chart-3: #f5a524;
  --chart-4: #a78bfa;
  --chart-5: #f3f5f1;
  --chart-6: #ef4444;

  --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: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 700;
  --display-tracking: -0.03em;
  --eyebrow-tracking: 0.08em;

  --radius-btn: 0.625rem;
  --radius-card: 0.875rem;
  --radius-input: 0.625rem;
  --border-w: 1px;
  --border-strong-w: 1.5px;
  --card-pad: 1.75rem;
  --caps: none;
  --caps-tracking: 0.02em;
  --btn-weight: 600;
  --measure: 64ch;

  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 24px 60px -32px rgba(0, 0, 0, 0.7);
  --shadow-raised: 0 30px 80px -24px rgba(0, 0, 0, 0.8);
  --shadow-btn: 0 10px 30px -10px color-mix(in srgb, var(--accent-text) 55%, transparent);
  --shadow-glow: 0 0 0 1px var(--accent-border), 0 0 60px -12px color-mix(in srgb, var(--accent-text) 45%, transparent);
}

html[data-theme="light"] {
  color-scheme: light;

  --canvas: #f2f6f3;
  --surface: #ffffff;
  --surface-2: #ebf1ec;
  --border: #d7ddd7;
  --border-strong: #b6c2b8;
  --ink: #0e1712;
  --muted: #5b6a61;

  --accent: #0e1712;
  --accent-hover: #223027;
  --accent-ink: #f4f7f4;
  --accent-text: #0f7a48;
  --accent-strong: #0b5c37;
  --accent-soft: #e3f5ec;
  --accent-border: #bfe6d2;

  --success: #158a4c;
  --success-ink: #ffffff;
  --success-soft: #e2f5e9;
  --success-strong: #0f6e3b;

  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #faead4;
  --warning-strong: #8a3f07;

  --danger: #dc2626;
  --danger-ink: #ffffff;
  --danger-soft: #fbe0e0;
  --danger-strong: #b91c1c;

  --chart-1: #0f7a48;
  --chart-2: #0e86c9;
  --chart-3: #b45309;
  --chart-4: #7c3aed;
  --chart-5: #0f766e;
  --chart-6: #dc2626;

  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 20px 44px -28px rgba(15, 30, 22, 0.28);
  --shadow-raised: 0 24px 60px -20px rgba(15, 30, 22, 0.3);
  --shadow-btn: 0 10px 24px -12px rgba(14, 23, 18, 0.4);
  --shadow-glow: 0 0 0 1px var(--accent-border), 0 0 40px -16px color-mix(in srgb, var(--accent-text) 35%, transparent);
}

/*
 * app.css — Two Blue Ticks' own rules: the command-centre ground, the chat
 * bubbles (shared by the hero panel and the proof transcript), the
 * terminal-style portrait frame, and the one moment that moves — the hero
 * chat sequence. Tokens only. Loads last, after design.css and theme.css.
 */

/* ---- The ground: a near-black command centre, not a flat fill --------- */
body {
  position: relative;
  background:
    radial-gradient(60rem 34rem at 82% -6%, color-mix(in srgb, var(--chart-2) 14%, transparent), transparent 60%),
    radial-gradient(52rem 30rem at 8% 8%, color-mix(in srgb, var(--accent-text) 12%, transparent), transparent 55%),
    var(--canvas);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    linear-gradient(color-mix(in srgb, var(--border) 55%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--border) 55%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(60rem 40rem at 50% 0%, black, transparent 75%);
}
header, main, footer { position: relative; z-index: 1; }

/* ---- Terminal caret on the hero's small command line -------------------
   Static, not blinking: the brief's one motion is the headline typing and
   the hero chat sequence — nothing else on the page moves. */
.caret {
  display: inline-block;
  width: 0.55ch;
  height: 0.95em;
  margin-left: 2px;
  vertical-align: -0.12em;
  background: var(--accent-text);
}

/* ---- Headline typewriter -------------------------------------------------
   The full headline is already in the markup (correct with no JS / for a
   reader); app.js clears it on load and types it back in once. While it
   types, a caret blinks at the writing edge; app.js removes it when done. */
.typewriter { display: inline-block; }
.typewriter.is-typing::after {
  content: "";
  display: inline-block;
  width: 0.5ch;
  height: 0.85em;
  margin-left: 3px;
  vertical-align: -0.08em;
  background: var(--accent-text);
  animation: caret-blink 0.9s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

/* ---- Chat bubbles: the hero's live panel and the proof transcript ------ */
.chat-thread { display: flex; flex-direction: column; gap: 0.85rem; }
.chat-row {
  display: flex;
  opacity: 0;
  transform: translateY(10px);
  animation: chat-in 0.55s var(--ease-out) both;
}
.chat-row-in { justify-content: flex-start; }
.chat-row-out { justify-content: flex-end; flex-direction: column; align-items: flex-end; }
@keyframes chat-in { to { opacity: 1; transform: none; } }

.chat-bubble {
  max-width: 84%;
  border-radius: 1rem;
  padding: 0.65rem 0.9rem;
  font-size: 0.875rem;
  line-height: 1.45;
}
.chat-bubble-in {
  background: var(--surface-2);
  color: var(--ink);
  border-bottom-left-radius: 0.25rem;
}
.chat-bubble-out {
  background: var(--accent-soft);
  color: var(--ink);
  border: 1px solid var(--accent-border);
  border-bottom-right-radius: 0.25rem;
}
.chat-meta {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.3rem;
  font-size: 0.6875rem;
  color: var(--muted);
  justify-content: flex-end;
  font-family: var(--font-mono);
}
.chat-ticks { display: inline-flex; }
.chat-ticks-sent { color: var(--muted); }
.chat-ticks-read { color: var(--chart-2); }
.chat-dot { display: inline-block; width: 0.4rem; height: 0.4rem; border-radius: 9999px; background: var(--accent-text); }

.chat-panel { overflow: hidden; }
.chat-thread { min-height: 15rem; }

/* ---- The speaker's portrait: no photograph, a composed terminal frame -- */
.portrait-frame {
  position: relative;
  background:
    radial-gradient(16rem 12rem at 50% 20%, color-mix(in srgb, var(--accent-text) 16%, transparent), transparent 70%),
    var(--surface);
}
.portrait-frame::before,
.portrait-frame::after {
  content: "";
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  border-color: var(--accent-border);
  border-style: solid;
}
.portrait-frame::before { top: 0.9rem; left: 0.9rem; border-width: 2px 0 0 2px; }
.portrait-frame::after { bottom: 0.9rem; right: 0.9rem; border-width: 0 2px 2px 0; }

@media (prefers-reduced-motion: reduce), (width < 1px) {
  .chat-row { opacity: 1; transform: none; animation: none; }
}
html.reduced-motion .chat-row { opacity: 1; transform: none; animation: none; }
html.reduced-motion .typewriter.is-typing::after { animation: none; }