/*
 * theme.css — Integrationlab. Neo-brutalist: paper ground, ink outlines,
 * hard offset shadows, flat poster colours (yellow brand, pink / mint / blue
 * accents) in the spirit of Gumroad's 2021 redesign. Dark mode keeps the
 * same flat colours and swaps the ink lines for paper-coloured ones.
 */

:root {
  --canvas: #fbf8f1;
  --surface: #ffffff;
  --surface-2: #fff1b8;
  --border: #111111;
  --border-strong: #111111;
  --ink: #111111;
  --muted: #464646;
  --accent: #ffd23f;
  --accent-hover: #ffc300;
  --accent-ink: #111111;
  --accent-text: #111111;
  --accent-strong: #111111;
  --accent-soft: #fff1b8;
  --accent-border: #111111;
  --success: #1a7f4b;
  --success-ink: #ffffff;
  --success-soft: #d6f5e3;
  --success-strong: #11603a;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #fdebd3;
  --warning-strong: #8a3f06;
  --danger: #c62828;
  --danger-ink: #ffffff;
  --danger-soft: #fde0e0;
  --danger-strong: #a11d1d;
  --chart-1: #ffd23f;
  --chart-2: #ffa3d7;
  --chart-3: #8ee6b9;
  --chart-4: #9db8ff;
  --chart-5: #111111;
  --chart-6: #ff8a5b;

  --font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 800;
  --display-tracking: -0.035em;
  --eyebrow-tracking: 0.08em;

  --radius-btn: 6px;
  --radius-card: 10px;
  --radius-input: 6px;
  --border-w: 2px;
  --border-strong-w: 2px;
  --shadow-btn: 4px 4px 0 0 var(--x-shadow);
  --shadow-card: 6px 6px 0 0 var(--x-shadow);
  --shadow-raised: 8px 8px 0 0 var(--x-shadow);
  --card-pad: 1.75rem;
  --btn-weight: 700;

  --x-shadow: #111111;
  --x-line: #111111;
  --x-on-color: #111111;
  --x-pink: #ffa3d7;
  --x-mint: #8ee6b9;
  --x-blue: #9db8ff;
  --x-yellow: #ffd23f;
  --x-band-bg: #111111;
  --x-band-ink: #fbf8f1;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #141414;
  --surface: #1e1e1e;
  --surface-2: #262318;
  --border: #f3eee2;
  --border-strong: #f3eee2;
  --ink: #f3eee2;
  --muted: #bdb7aa;
  --accent: #ffd23f;
  --accent-hover: #ffc300;
  --accent-ink: #111111;
  --accent-text: #ffd23f;
  --accent-strong: #ffe58a;
  --accent-soft: #2e2a17;
  --accent-border: #ffd23f;
  --success: #2fb36c;
  --success-ink: #0d0d0d;
  --success-soft: #16301f;
  --success-strong: #7fdca6;
  --warning: #e08a2c;
  --warning-ink: #0d0d0d;
  --warning-soft: #33240f;
  --warning-strong: #f2b46e;
  --danger: #e05252;
  --danger-ink: #0d0d0d;
  --danger-soft: #361818;
  --danger-strong: #f29a9a;
  --chart-1: #ffd23f;
  --chart-2: #ffa3d7;
  --chart-3: #8ee6b9;
  --chart-4: #9db8ff;
  --chart-5: #f3eee2;
  --chart-6: #ff8a5b;

  --x-shadow: #f3eee2;
  --x-line: #f3eee2;
  --x-on-color: #111111;
  --x-pink: #ffa3d7;
  --x-mint: #8ee6b9;
  --x-blue: #9db8ff;
  --x-yellow: #ffd23f;
  --x-band-bg: #ffd23f;
  --x-band-ink: #111111;
}

/*
 * app.css — Integrationlab's own pieces: the expanded display type, the
 * flat poster fills, the hero's workflow canvas with its live wires, the
 * app-name ticker, the staircase of steps and the quote stickers.
 * Tokens only.
 */

/* ---- Type ---------------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: -0.02em;
  line-height: 0.95;
}
@media (min-width: 48rem) {
  .display { font-stretch: 118%; letter-spacing: var(--display-tracking); }
}
.mono { font-family: var(--font-mono); }
.caps { text-transform: uppercase; letter-spacing: var(--eyebrow-tracking); }

/* A single highlighted phrase in the opener: a pink slab with an ink edge. */
.hl {
  display: inline-block;
  padding: 0 0.14em 0.04em;
  background: var(--x-pink);
  color: var(--x-on-color);
  border: var(--border-w) solid var(--x-line);
  border-radius: 0.12em;
  box-shadow: 0.08em 0.08em 0 0 var(--x-shadow);
  transform: rotate(-1.5deg);
}
.hl-yellow { background: var(--x-yellow); transform: rotate(1.25deg); }

/* The logo's two linked blocks. */
.logo-a { fill: var(--x-yellow); }
.logo-b { fill: var(--x-pink); }

/* ---- Lines & slabs --------------------------------------------------------- */
.rule-b { border-bottom: var(--border-w) solid var(--x-line); }
.rule-t { border-top: var(--border-w) solid var(--x-line); }
.rule-y { border-block: var(--border-w) solid var(--x-line); }

.slab {
  border: var(--border-w) solid var(--x-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* Flat poster fills. Text on them is always ink, in both modes. */
.fill-pink   { background: var(--x-pink);   color: var(--x-on-color); }
.fill-mint   { background: var(--x-mint);   color: var(--x-on-color); }
.fill-blue   { background: var(--x-blue);   color: var(--x-on-color); }
.fill-yellow { background: var(--x-yellow); color: var(--x-on-color); }
.fill-paper  { background: var(--surface);  color: var(--ink); }
.fill-band   { background: var(--x-band-bg); color: var(--x-band-ink); }

/* ---- Hero: the workflow canvas -------------------------------------------- */
.flow-canvas {
  position: relative;
  background-color: var(--surface);
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 22%, transparent) 1.2px, transparent 1.4px);
  background-size: 20px 20px;
  border: var(--border-w) solid var(--x-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-raised);
}
.flow-head {
  border-bottom: var(--border-w) solid var(--x-line);
  background: var(--surface);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.dot {
  width: 0.8rem; height: 0.8rem; border-radius: 999px; flex: none;
  border: var(--border-w) solid var(--x-line);
}

.flow-node {
  position: relative;
  border: var(--border-w) solid var(--x-line);
  border-radius: var(--radius-btn);
  box-shadow: var(--shadow-btn);
  min-width: 0;
}
.flow-node .data {
  background: var(--surface);
  color: var(--ink);
  border: var(--border-w) solid var(--x-line);
  border-radius: 4px;
}
html[data-theme="dark"] .flow-node .data { background: var(--ink); color: var(--x-on-color); border-color: var(--x-on-color); }

/* A wire between steps: marching dashes show data moving through. */
.flow-wire {
  flex: none;
  align-self: center;
  width: var(--border-w);
  height: 2.25rem;
  background-image: repeating-linear-gradient(180deg, var(--x-line) 0 6px, transparent 6px 12px);
  background-size: 2px 24px;
  animation: wire-down 0.9s linear infinite;
}
@media (min-width: 64rem) {
  .flow-wire {
    width: 2.5rem;
    height: var(--border-w);
    background-image: repeating-linear-gradient(90deg, var(--x-line) 0 6px, transparent 6px 12px);
    background-size: 24px 2px;
    animation-name: wire-right;
  }
}
@keyframes wire-down { from { background-position: 0 0; } to { background-position: 0 24px; } }
@keyframes wire-right { from { background-position: 0 0; } to { background-position: 24px 0; } }

/* The "Built in Pabbly Connect" sticker sits on the canvas's bottom edge,
   clear of the window bar and its Live badge. */
.sticker {
  position: absolute;
  top: auto;
  bottom: -1.25rem;
  border: var(--border-w) solid var(--x-line);
  border-radius: 999px;
  box-shadow: var(--shadow-btn);
  transform: rotate(-4deg);
  white-space: nowrap;
  z-index: 1;
}

/* ---- App-name ticker -------------------------------------------------------- */
.marquee { overflow: hidden; }
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 48s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-sep {
  width: 0.75rem; height: 0.75rem;
  background: currentColor;
  transform: rotate(45deg);
  flex: none;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---- Service tiles ------------------------------------------------------------ */
.tile {
  border: var(--border-w) solid var(--x-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: transform 120ms var(--ease), box-shadow 120ms var(--ease);
}
.tile:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 0 var(--x-shadow);
}
.tile-icon {
  width: 3.25rem; height: 3.25rem; flex: none;
  display: grid; place-items: center;
  border: var(--border-w) solid currentColor;
  border-radius: var(--radius-btn);
}
.tile-icon .icon { width: 1.5rem; height: 1.5rem; }
.path-line { border-top: var(--border-w) dashed currentColor; }

/* ---- Process staircase: each step sizes to its words, so the rise reads. ---- */
.step {
  align-self: start;
  border: var(--border-w) solid var(--x-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  background: var(--surface);
  overflow: hidden;
}
.step-head { border-bottom: var(--border-w) solid var(--x-line); }

/* ---- Statement band: quote stickers ------------------------------------------ */
.quote {
  border: var(--border-w) solid var(--x-on-color);
  border-radius: var(--radius-card);
  box-shadow: 6px 6px 0 0 var(--x-band-ink);
}
.tilt-l { transform: rotate(-1.5deg); }
.tilt-r { transform: rotate(1.25deg); }

/* ---- Checklist ticks ------------------------------------------------------------ */
.tick {
  width: 2.25rem; height: 2.25rem; flex: none;
  display: grid; place-items: center;
  background: var(--x-mint);
  color: var(--x-on-color);
  border: var(--border-w) solid var(--x-line);
  border-radius: var(--radius-btn);
  box-shadow: 3px 3px 0 0 var(--x-shadow);
}

/* ---- Reduced motion ------------------------------------------------------------- */
html.reduced-motion .marquee-track,
html.reduced-motion .flow-wire { animation: none; }
html.reduced-motion .tile, html.reduced-motion .btn { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .marquee-track, .flow-wire { animation: none; }
}