/* ==========================================================================
   Chinwag design tokens — v1
   Source: "Homepage — chinwag.sh" artboard, Chinwag design canvas.
   Single source of truth for color, type, spacing, radii and core components.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts
   Production: self-host woff2 (Geist and Geist Mono are SIL OFL; get them
   from Google Fonts or Vercel's `geist` npm package) and replace this import
   with @font-face rules using font-display: swap.
   Prototyping only:
   -------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap");

:root {
  /* ---- Color: ground & surfaces ---- */
  --cw-bg:            #0A0B0D;  /* page ground */
  --cw-bg-raised:     #0D0F12;  /* alternating section bands, cards */
  --cw-surface:       #111317;  /* panels, terminal, highlighted table column */
  --cw-surface-2:     #1A1D22;  /* inactive step chips */

  /* ---- Color: hairlines ---- */
  --cw-line-1:        #1C1F24;  /* section dividers */
  --cw-line-2:        #23272D;  /* card / panel borders */
  --cw-line-3:        #2A2E35;  /* inputs, secondary buttons, emphasis borders */

  /* ---- Color: text (all pass WCAG AA on --cw-bg and --cw-surface) ---- */
  --cw-text:          #ECEDEE;  /* primary, headings */
  --cw-text-body:     #C9CDD1;  /* emphasized body (Chinwag table column) */
  --cw-text-2:        #A1A7AD;  /* secondary body */
  --cw-text-3:        #7D838A;  /* eyebrows, meta, captions (~5:1) */

  /* ---- Color: signal ---- */
  --cw-accent:        #C6F432;  /* primary CTA, verified ✓, key numerals ONLY */
  --cw-accent-hover:  #E2FF8A;
  --cw-on-accent:     #0A0B0D;  /* text on accent fills */
  --cw-fail:          #E8806A;  /* failed shard / failed step */

  /* ---- Type families ---- */
  --cw-font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --cw-font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- Type scale (fluid display, fixed text) ---- */
  --cw-fs-display:    clamp(40px, 5vw, 66px);    /* hero H1 */
  --cw-fs-display-2:  clamp(34px, 4.6vw, 58px);  /* feature H2 (Shadow-KV), CTA uses 36–64 */
  --cw-fs-h2:         clamp(32px, 4vw, 48px);    /* section H2 */
  --cw-fs-statement:  clamp(28px, 3.4vw, 44px);  /* thesis statement */
  --cw-fs-stat:       36px;                      /* hero stat numerals */
  --cw-fs-stat-sm:    26px;                      /* feature stat numerals */
  --cw-fs-h3:         20px;                      /* card titles */
  --cw-fs-lead:       19px;                      /* hero sub-lead */
  --cw-fs-body-lg:    18px;                      /* section intros */
  --cw-fs-body:       17px;                      /* default body */
  --cw-fs-small:      15.5px;                    /* card body, table cells */
  --cw-fs-meta:       14px;                      /* captions, footer */
  --cw-fs-mono:       13.5px;                    /* terminal lines */
  --cw-fs-eyebrow:    13px;                      /* numbered section eyebrows */
  --cw-fs-label:      12.5px;                    /* mono labels, table heads */

  --cw-lh-display:    1.03;
  --cw-lh-heading:    1.08;
  --cw-lh-statement:  1.18;
  --cw-lh-body:       1.55;

  --cw-track-display: -0.035em;
  --cw-track-heading: -0.03em;
  --cw-track-title:   -0.015em;
  --cw-track-eyebrow:  0.08em;
  --cw-track-label:    0.06em;

  /* ---- Layout ---- */
  --cw-container:     1200px;
  --cw-gutter:        clamp(20px, 5vw, 64px);    /* container padding-inline */
  --cw-section-y:     clamp(72px, 9vw, 120px);   /* section padding-block */

  /* ---- Spacing (4-based) ---- */
  --cw-space-1:  4px;
  --cw-space-2:  8px;
  --cw-space-3:  12px;
  --cw-space-4:  16px;
  --cw-space-5:  24px;
  --cw-space-6:  28px;
  --cw-space-7:  32px;
  --cw-space-8:  48px;
  --cw-space-9:  56px;
  --cw-space-10: 72px;

  /* ---- Radii ---- */
  --cw-radius-chip:   8px;   /* step chips */
  --cw-radius-ctl:    10px;  /* buttons, inputs */
  --cw-radius-sm:     12px;  /* small cards */
  --cw-radius-card:   14px;  /* cards */
  --cw-radius-panel:  16px;  /* terminal, table, diagram panels */

  /* ---- Controls ---- */
  --cw-ctl-h:         48px;  /* min touch target 44px */
  --cw-ctl-h-nav:     44px;

  /* ---- Motion ---- */
  --cw-ease:          cubic-bezier(0.2, 0.7, 0.2, 1);
  --cw-dur-fast:      150ms;
  --cw-dur-line:      350ms; /* per hero terminal line; total sequence ≈ 1.4s */
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  background: var(--cw-bg);
  color: var(--cw-text);
  font-family: var(--cw-font-sans);
  font-size: var(--cw-fs-body);
  line-height: var(--cw-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--cw-text); }
a:hover { color: #FFFFFF; }

code, kbd, samp, pre { font-family: var(--cw-font-mono); }

:focus-visible {
  outline: 2px solid var(--cw-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==========================================================================
   Layout
   ========================================================================== */
.cw-container {
  max-width: var(--cw-container);
  margin-inline: auto;
  padding-inline: var(--cw-gutter);
}

.cw-section        { padding-block: var(--cw-section-y); border-top: 1px solid var(--cw-line-1); }
.cw-section--band  { background: var(--cw-bg-raised); }

/* ==========================================================================
   Typography
   ========================================================================== */
.cw-display {
  margin: 0;
  font-size: var(--cw-fs-display);
  line-height: var(--cw-lh-display);
  letter-spacing: var(--cw-track-display);
  font-weight: 600;
}

.cw-h2 {
  margin: 0;
  font-size: var(--cw-fs-h2);
  line-height: var(--cw-lh-heading);
  letter-spacing: var(--cw-track-heading);
  font-weight: 600;
}

.cw-h2--feature { font-size: var(--cw-fs-display-2); line-height: 1.04; letter-spacing: var(--cw-track-display); }

.cw-statement {
  margin: 0;
  font-size: var(--cw-fs-statement);
  line-height: var(--cw-lh-statement);
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--cw-text-3);
}
.cw-statement strong { color: var(--cw-text); font-weight: 500; }

.cw-h3 {
  margin: 0;
  font-size: var(--cw-fs-h3);
  line-height: 1.3;
  letter-spacing: var(--cw-track-title);
  font-weight: 600;
}

.cw-lead     { font-size: var(--cw-fs-lead);    color: var(--cw-text-2); }
.cw-body-lg  { font-size: var(--cw-fs-body-lg); color: var(--cw-text-2); }
.cw-small    { font-size: var(--cw-fs-small);   color: var(--cw-text-2); }
.cw-meta     { font-size: var(--cw-fs-meta);    color: var(--cw-text-3); }

/* "04 — Shadow-KV" */
.cw-eyebrow {
  margin: 0;
  font-family: var(--cw-font-mono);
  font-size: var(--cw-fs-eyebrow);
  letter-spacing: var(--cw-track-eyebrow);
  text-transform: uppercase;
  color: var(--cw-text-3);
}
.cw-eyebrow--accent { color: var(--cw-accent); }

/* "CISO", table heads */
.cw-label {
  font-family: var(--cw-font-mono);
  font-size: var(--cw-fs-label);
  letter-spacing: var(--cw-track-label);
  text-transform: uppercase;
  color: var(--cw-text-3);
}

.cw-accent { color: var(--cw-accent); }

/* ==========================================================================
   Buttons & form
   ========================================================================== */
.cw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cw-ctl-h);
  padding: 0 22px;
  border-radius: var(--cw-radius-ctl);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--cw-dur-fast) var(--cw-ease), border-color var(--cw-dur-fast) var(--cw-ease);
}
.cw-btn--primary   { background: var(--cw-accent); color: var(--cw-on-accent); border: 0; }
.cw-btn--primary:hover { background: var(--cw-accent-hover); color: var(--cw-on-accent); }
.cw-btn--secondary { background: transparent; color: var(--cw-text); border: 1px solid var(--cw-line-3); font-weight: 500; }
.cw-btn--secondary:hover { border-color: var(--cw-text-3); color: var(--cw-text); }
.cw-btn--nav       { min-height: var(--cw-ctl-h-nav); padding: 0 18px; font-size: 15px; }

.cw-field { display: flex; flex-direction: column; gap: var(--cw-space-2); }
.cw-field label { font-size: var(--cw-fs-meta); color: var(--cw-text-2); }
.cw-input {
  min-height: var(--cw-ctl-h);
  padding: 0 16px;
  border-radius: var(--cw-radius-ctl);
  border: 1px solid var(--cw-line-3);
  background: var(--cw-bg);
  color: var(--cw-text);
  font: inherit;
  font-size: 16px; /* prevents iOS zoom */
}
.cw-input::placeholder { color: var(--cw-text-3); }

/* ==========================================================================
   Surfaces
   ========================================================================== */
.cw-card {
  padding: var(--cw-space-6);
  border: 1px solid var(--cw-line-2);
  border-radius: var(--cw-radius-card);
  background: var(--cw-bg-raised);
}

.cw-panel {
  border: 1px solid var(--cw-line-2);
  border-radius: var(--cw-radius-panel);
  background: var(--cw-surface);
  overflow: hidden;
}

/* Sandbox cards: Driver / Reviewer / QA */
.cw-card--agent { border-top: 2px solid var(--cw-accent); border-radius: var(--cw-radius-sm); padding: 20px; }

/* ==========================================================================
   Terminal (hero + Shadow-KV)
   ========================================================================== */
.cw-terminal__bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--cw-line-2);
  font-family: var(--cw-font-mono); font-size: var(--cw-fs-label); color: var(--cw-text-3);
}
.cw-terminal__body {
  padding: 22px 20px;
  display: flex; flex-direction: column; gap: var(--cw-space-4);
  font-family: var(--cw-font-mono); font-size: var(--cw-fs-mono); line-height: 1.5;
}
.cw-terminal__line { display: flex; gap: var(--cw-space-3); }
.cw-terminal__sym  { flex: none; width: 16px; color: var(--cw-text-3); }
.cw-terminal__sym--ok   { color: var(--cw-accent); }
.cw-terminal__sym--fail { color: var(--cw-fail); }
.cw-terminal__time { color: var(--cw-text-3); font-variant-numeric: tabular-nums; }

/* Signature motion #1: lines resolve in sequence to 1.4s */
@keyframes cw-line-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.cw-terminal__line { animation: cw-line-in var(--cw-dur-line) var(--cw-ease) both; }
.cw-terminal__line:nth-child(1) { animation-delay: 0ms; }
.cw-terminal__line:nth-child(2) { animation-delay: 350ms; }
.cw-terminal__line:nth-child(3) { animation-delay: 700ms; }
.cw-terminal__line:nth-child(4) { animation-delay: 1050ms; }

/* ==========================================================================
   Stats
   ========================================================================== */
.cw-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1px;
  background: var(--cw-line-1);
  border: 1px solid var(--cw-line-1);
  border-radius: var(--cw-radius-card);
  overflow: hidden;
}
.cw-stat        { background: var(--cw-bg); padding: 24px 24px 22px; }
.cw-stat__value { font-size: var(--cw-fs-stat); font-weight: 600; letter-spacing: var(--cw-track-heading); font-variant-numeric: tabular-nums; }
.cw-stat__label { margin-top: 4px; font-size: 15px; color: var(--cw-text-2); }

/* ==========================================================================
   Comparison table ("Five moments")
   ========================================================================== */
.cw-table-wrap { overflow-x: auto; border: 1px solid var(--cw-line-2); border-radius: var(--cw-radius-panel); }
.cw-table      { width: 100%; min-width: 880px; border-collapse: collapse; font-size: var(--cw-fs-small); line-height: 1.5; }
.cw-table th, .cw-table td { padding: 24px; vertical-align: top; text-align: left; border-bottom: 1px solid var(--cw-line-1); }
.cw-table thead th { padding-block: 18px; border-bottom-color: var(--cw-line-2); font-family: var(--cw-font-mono); font-size: var(--cw-fs-label); letter-spacing: var(--cw-track-label); text-transform: uppercase; font-weight: 500; color: var(--cw-text-3); }
.cw-table tbody th { font-weight: 600; color: var(--cw-text); }
.cw-table .cw-col-today   { color: var(--cw-text-2); }
.cw-table .cw-col-chinwag { color: var(--cw-text-body); background: var(--cw-surface); }
.cw-table thead .cw-col-chinwag { color: var(--cw-accent); }
.cw-table .cw-col-today strong   { color: var(--cw-text);   font-weight: 600; }
.cw-table .cw-col-chinwag strong { color: var(--cw-accent); font-weight: 600; }
.cw-table tr:last-child > * { border-bottom: 0; }

/* ==========================================================================
   Shadow-KV step diagram
   ========================================================================== */
.cw-steps { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; font-family: var(--cw-font-mono); font-size: 13px; }
.cw-step  { height: 44px; border-radius: var(--cw-radius-chip); display: flex; align-items: center; justify-content: center; }
.cw-step--replayed { background: var(--cw-surface-2); color: var(--cw-text-3); }
.cw-step--saved    { border: 1px solid var(--cw-line-3); color: var(--cw-text-2); }
.cw-step--fail     { border: 1px solid var(--cw-fail); color: var(--cw-fail); }
.cw-step--fork     { background: var(--cw-accent); color: var(--cw-on-accent); font-weight: 600; }
.cw-step--next     { border: 1px solid var(--cw-accent); color: var(--cw-accent); }
.cw-step--pending  { border: 1px dashed var(--cw-line-3); color: var(--cw-text-3); }

/* Signature motion #2: fork branches at Step 11 */
@keyframes cw-fork { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.cw-step--fork, .cw-step--next { animation: cw-fork 400ms var(--cw-ease) both; }
.cw-step--next { animation-delay: 150ms; }

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}