/*
 * theme.css — Sequence's design-system values.
 *
 * Bold-geometric: flat colour blocks, thick strokes, hard edges. Palette
 * built from the owner-approved four (canvas paper, surface card, cobalt
 * accent, warm ink) plus a poster gold used for campaign tickets and the
 * automation spine. Corners are square, shadows are hard offsets that read
 * as a graphic device (not elevation), and both modes swap ink for canvas
 * rather than inverting one palette onto the other.
 */

:root {
  --canvas: #efebe2;
  --surface: #f8f6f2;
  --surface-2: #e3ddcf;
  --border: color-mix(in srgb, #171712 22%, #efebe2);
  --border-strong: color-mix(in srgb, #171712 55%, #efebe2);
  --ink: #171712;
  --muted: #55544e;
  --accent: #2851ff;
  --accent-hover: #2245d8;
  --accent-ink: #ffffff;
  --accent-text: #254beb;
  --accent-strong: #2245d8;
  --accent-soft: color-mix(in srgb, #2851ff 13%, #f8f6f2);
  --accent-border: color-mix(in srgb, #2851ff 40%, #efebe2);
  --success: #1f7a4d;
  --success-ink: #ffffff;
  --success-soft: #dbe9de;
  --success-strong: #17603c;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f0e0c9;
  --warning-strong: #93430a;
  --danger: #c81e1e;
  --danger-ink: #ffffff;
  --danger-soft: #f2dad7;
  --danger-strong: #a3170f;
  --chart-1: #2851ff;
  --chart-2: #f2b705;
  --chart-3: #171712;
  --chart-4: #c81e1e;
  --chart-5: #1f7a4d;
  --chart-6: #55544e;

  /* Poster gold — the second flat block colour alongside cobalt. */
  --x-gold: #f2b705;
  --x-gold-ink: #171712;
  /* The automation section's statement band — always dark, in either mode,
     so it reads as a deliberate ink block rather than inverting with the toggle. */
  --x-band: #14130e;
  --x-band-ink: #f2efe6;

  --font-display: "Archivo", 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, monospace;
  --display-weight: 900;
  --display-tracking: -0.03em;
  --eyebrow-tracking: 0.06em;

  --radius-btn: 0px;
  --radius-card: 0px;
  --radius-input: 0px;
  --border-w: 2px;
  --border-strong-w: 3px;
  --shadow-card: 6px 6px 0 0 var(--ink);
  --shadow-raised: 10px 10px 0 0 var(--ink);
  --shadow-btn: 4px 4px 0 0 var(--ink);
  --card-pad: 2rem;
  --caps: uppercase;
  --caps-tracking: 0.01em;
  --btn-weight: 800;
  --measure: 64ch;
}

html[data-theme="dark"] {
  --canvas: #14130e;
  --surface: #1b1a13;
  --surface-2: #24221a;
  --border: color-mix(in srgb, #f2efe6 20%, #14130e);
  --border-strong: color-mix(in srgb, #f2efe6 45%, #14130e);
  --ink: #f2efe6;
  --muted: #aca897;
  --accent: #5c82ff;
  --accent-hover: #7a99ff;
  --accent-ink: #0c1024;
  --accent-text: #93a9ff;
  --accent-strong: #b9c8ff;
  --accent-soft: color-mix(in srgb, #5c82ff 20%, #1b1a13);
  --accent-border: color-mix(in srgb, #5c82ff 45%, #14130e);
  --success: #3fae76;
  --success-ink: #0c1024;
  --success-soft: #16301f;
  --success-strong: #7fe3ab;
  --warning: #e0a53d;
  --warning-ink: #14130e;
  --warning-soft: #3a2c10;
  --warning-strong: #f0c078;
  --danger: #e5534b;
  --danger-ink: #14130e;
  --danger-soft: #3a1512;
  --danger-strong: #ff9a92;
  --chart-1: #5c82ff;
  --chart-2: #f2c94c;
  --chart-3: #f2efe6;
  --chart-4: #e5534b;
  --chart-5: #3fae76;
  --chart-6: #aca897;

  --x-gold: #f2c94c;
  --x-gold-ink: #14130e;
  --x-band: #14130e;
  --x-band-ink: #f2efe6;
}

/*
 * app.css — Sequence's own screens: the compose window, the campaign
 * tickets, the automation spine and the statement bands. Tokens only.
 */

/* ---- Hero lead line ---------------------------------------------------- */
.hero-lead {
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 34rem;
  margin-bottom: 2.5rem;
}

/* ---- The compose window: the product itself, as the hero's art -------- */
.compose-window {
  border: var(--border-strong-w, 3px) solid var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow-raised);
  position: relative;
}
.compose-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: var(--surface-2);
  border-bottom: var(--border-strong-w, 3px) solid var(--ink);
}
.compose-dots { display: flex; gap: 0.5rem; }
.compose-dot {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 9999px;
  border: 2px solid var(--ink);
  display: inline-block;
}
.compose-titlebar-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.compose-field {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.9rem 1.5rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.95rem;
}
.compose-label {
  flex-shrink: 0;
  width: 4.5rem;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}
.compose-subject-row { border-bottom: 1px solid var(--border); }
.compose-subject {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
}
.compose-caret {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: var(--ink);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: caret-blink 1s steps(1, end) infinite;
}
.compose-caret.is-done { opacity: 0; animation: none; }
@keyframes caret-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.compose-preview {
  padding: 1.25rem 1.5rem;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.compose-actions {
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: flex-end;
  background: var(--surface-2);
}
/* ---- Tint band (unlimited subscribers) --------------------------------- */
.tint-band { background: var(--accent-soft); border-top: 2px solid var(--border); border-bottom: 2px solid var(--border); }
.infinity-glyph {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(7rem, 18vw, 13rem);
  line-height: 0.8;
  color: var(--accent-text);
  flex-shrink: 0;
}

/* ---- Campaign tickets: asymmetric colour blocks, not a card grid ------- */
.tickets-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.75rem;
}
.ticket {
  border: var(--border-strong-w, 3px) solid var(--ink);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  min-height: 15rem;
  box-shadow: var(--shadow-card);
}
.ticket-lg { grid-column: span 4; }
.ticket-sm { grid-column: span 2; }
.ticket-stub {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-top: 1rem;
  border-top: 1px dashed currentColor;
  opacity: 0.9;
}
.ticket-time {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ticket-audience { font-family: var(--font-mono); font-size: 0.8rem; }
@media (max-width: 860px) {
  .tickets-grid { grid-template-columns: 1fr; }
  .ticket-lg, .ticket-sm { grid-column: auto; }
}

/* ---- Dark statement band (automation) ----------------------------------- */
.band-ink { background: var(--x-band); }

/* ---- The automation spine ------------------------------------------------ */
.spine { display: flex; flex-direction: column; }
.spine-step { position: relative; display: flex; gap: 1.5rem; align-items: flex-start; padding-bottom: 3rem; }
.spine-step:last-child { padding-bottom: 0; }
.spine-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 3.25rem;
  bottom: -3rem;
  width: 2px;
  background: color-mix(in srgb, var(--x-band-ink) 30%, transparent);
}
.spine-num {
  position: relative;
  z-index: 1;
  width: 3.25rem;
  height: 3.25rem;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1rem;
  border: 2px solid var(--x-band-ink);
}
.spine-cobalt { background: var(--accent); color: var(--accent-ink); }
.spine-gold { background: var(--x-gold); color: var(--x-gold-ink); }

/* ---- Deliverability band -------------------------------------------------- */
.deliver-band { background: var(--accent); color: var(--accent-ink); }