/*
 * theme.css — Inkwell's design-system values.
 *
 * A well-set newsletter held to a swiss grid: warm paper canvas, near-black
 * ink for buttons and body text, a single editorial green reserved for
 * links and the one place the brand wants to speak. Corners are almost
 * square (2px) and shadows are essentially off — the page is drawn with
 * hairline rules, not elevation.
 */

:root {
  --canvas: #faf7f1;
  --surface: #fdfbf9;
  --surface-2: #f2ece0;
  --border: #e6ddcc;
  --border-strong: #cec1a8;
  --ink: #18140f;
  --muted: #696661;

  --accent: #18140f;
  --accent-hover: #322a20;
  --accent-ink: #faf7f1;
  --accent-text: #1c7047;
  --accent-strong: #18140f;
  --accent-soft: #e3ede4;
  --accent-border: #bcd6c3;

  --success: #1c7047;
  --success-ink: #faf7f1;
  --success-soft: #e3ede4;
  --success-strong: #145936;

  --warning: #9a6a1f;
  --warning-ink: #faf7f1;
  --warning-soft: #f3e6d0;
  --warning-strong: #7c5417;

  --danger: #a33a2c;
  --danger-ink: #faf7f1;
  --danger-soft: #f5ded9;
  --danger-strong: #7e2c21;

  --chart-1: #1c7047;
  --chart-2: #b5613f;
  --chart-3: #9a6a1f;
  --chart-4: #3b5a6b;
  --chart-5: #6b4066;
  --chart-6: #18140f;

  --font-display: "Fraunces", ui-serif, Georgia, 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: 600;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.06em;

  --radius-btn: 2px;
  --radius-card: 2px;
  --radius-input: 2px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: none;
  --shadow-btn: none;
  --shadow-raised: 0 12px 32px color-mix(in srgb, var(--ink) 16%, transparent);
  --card-pad: 1.75rem;
  --caps: none;
  --caps-tracking: 0.04em;
  --btn-weight: 600;
  --measure: 68ch;

  /* This app's own tokens — the dark statement band inverts the page. */
  --x-band-bg: #18140f;
  --x-band-ink: #faf7f1;
  --x-band-muted: #a39c8e;
  --x-band-accent: #63c08f;
  --x-paper-line: #e6ddcc;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #15120d;
  --surface: #1c1811;
  --surface-2: #241f16;
  --border: #332c20;
  --border-strong: #4c4230;
  --ink: #f3ede1;
  --muted: #a89f8d;

  --accent: #f3ede1;
  --accent-hover: #e4dac5;
  --accent-ink: #18140f;
  --accent-text: #57b98a;
  --accent-strong: #8fd6ab;
  --accent-soft: #182922;
  --accent-border: #2c4736;

  --success: #3fae74;
  --success-ink: #101a13;
  --success-soft: #182922;
  --success-strong: #8fd6ab;

  --warning: #d69a4c;
  --warning-ink: #1f1608;
  --warning-soft: #2e2213;
  --warning-strong: #eec089;

  --danger: #d97a68;
  --danger-ink: #1f0f0c;
  --danger-soft: #2e1714;
  --danger-strong: #f0a99b;

  --chart-1: #57b98a;
  --chart-2: #d98a68;
  --chart-3: #d6a24c;
  --chart-4: #6f97a8;
  --chart-5: #a679a0;
  --chart-6: #f3ede1;

  --shadow-raised: 0 12px 32px color-mix(in srgb, black 45%, transparent);

  --x-band-bg: #f3ede1;
  --x-band-ink: #15120d;
  --x-band-muted: #5b5445;
  --x-band-accent: #1c7047;
  --x-paper-line: #332c20;
}

/*
 * app.css — Inkwell's own ground and its one screen: the automation canvas.
 * Everything here reads theme.css tokens; nothing here re-declares a
 * primitive's own selector (see tailwind/components.css for those).
 */

/* ---- Hero-only reveal --------------------------------------------------
   Pure CSS: behavior.js sets data-inview-fired on the element the moment it
   enters the viewport (app:inview), and the transition below does the rest.
   Nothing else on the page moves. */
[data-inview] {
  transform: translateY(18px);
  transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-inview][data-inview-fired] {
  transform: none;
}
html.reduced-motion [data-inview] {
  transform: none;
  transition: none;
}

/* ---- Dark statement band -------------------------------------------------
   Inverts the page: --x-band-bg/ink flip per mode so it always reads as a
   deliberate change of register, light or dark. */
.band {
  background: var(--x-band-bg);
  color: var(--x-band-ink);
}
.band-glyph {
  font-size: clamp(4.5rem, 10vw, 7.5rem);
  line-height: 1;
  font-weight: 400;
  color: var(--x-band-accent);
}
.band-ink {
  color: var(--x-band-ink);
}
.band-muted {
  color: var(--x-band-muted);
}

/* ---- The automation canvas -------------------------------------------------
   The one screen that is this product: a trigger, a wait, a send, a branch —
   drawn as a diagram, not decoration. A faint dot grid stands in for the
   builder's own canvas. */
.canvas-frame {
  border: 1px solid var(--border);
  background-color: var(--surface);
  background-image: radial-gradient(circle, var(--border) 1px, transparent 1px);
  background-size: 20px 20px;
  padding: 1.5rem;
  border-radius: var(--radius-card);
}
.canvas-frame-lg {
  padding: 2rem clamp(1rem, 4vw, 3rem);
  min-height: 30rem;
  display: flex;
  align-items: center;
}
.canvas-frame-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.canvas-frame-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink);
}

.flow {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}
.flow-row {
  max-width: 34rem;
  margin-inline: auto;
}
.flow-node {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-card);
}
.flow-node-accent {
  border-color: var(--accent);
}
.flow-node-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: var(--radius-card);
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.flow-node-copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.flow-node-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.flow-node-detail {
  font-size: 0.95rem;
  color: var(--ink);
}
.flow-line {
  width: 1px;
  height: 1.5rem;
  background: var(--border-strong);
  margin-inline: auto;
}
.flow-condition {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border: 1px dashed var(--border-strong);
  background: var(--surface-2);
  padding: 0.65rem 1rem;
  border-radius: var(--radius-card);
  text-align: center;
}
.flow-condition .flow-node-icon {
  width: 1.75rem;
  height: 1.75rem;
}
.flow-condition .flow-node-title {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}
.flow-branch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.25rem;
  padding-top: 1.5rem;
}
.flow-branch::before {
  content: "";
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  height: 1px;
  background: var(--border-strong);
}
.flow-branch-col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 1.5rem;
}
.flow-branch-col::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 1.5rem;
  background: var(--border-strong);
}
.flow-branch-label {
  align-self: center;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: var(--canvas);
  padding: 0 0.4rem;
}
.flow-branch-label-yes {
  color: var(--accent-text);
}

/* ---- Campaign index icon --------------------------------------------------- */
.row-icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: var(--radius-card);
  background: var(--surface-2);
  color: var(--muted);
}