/* Direction: Pabbly Connect product launch — clean white, mint wash, emerald accent, heavy sans display */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #fbfdfc;
  --surface: #fdfefe;
  --surface-2: #eff2f0;
  --border: #e3e8e6;
  --border-strong: #b1b8b5;
  --ink: #121816;
  --muted: #5b6470;
  --accent: #17a673;
  --accent-hover: #148d62;
  --accent-ink: #031710;
  --accent-text: #0f7a54;
  --accent-strong: #107853;
  --accent-soft: #e3f6ee;
  --accent-border: #94d6be;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dfeee5;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f2e9df;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f3e2e1;
  --danger-strong: #b91c1c;
  --chart-1: #17a673;
  --chart-2: #129bbe;
  --chart-3: #6a68c2;
  --chart-4: #d074b0;
  --chart-5: #b25229;
  --chart-6: #a49409;

  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --display-weight: 800;
  --display-tracking: -0.03em;
  --radius-card: 18px;
  --radius-btn: 999px;
  --x-on-photo: #ffffff;
  --x-band: #0d1411;
  --gradient-mint: radial-gradient(60% 50% at 50% 0%, #d9f5e8 0%, #fbfdfc00 70%);
  --gradient-logo: linear-gradient(135deg, #17a673, #1f7fbf);
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Plus Jakarta Sans", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #03110c;
  --surface: #1c2924;
  --surface-2: #101d18;
  --border: #26322e;
  --border-strong: #4f5855;
  --ink: #fbfdfc;
  --muted: #989f9c;
  --accent: #17a673;
  --accent-hover: #3ab388;
  --accent-ink: #031710;
  --accent-text: #17a673;
  --accent-strong: #17a673;
  --accent-soft: #073223;
  --accent-border: #0c543a;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #072917;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #2a200b;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #2b1310;
  --danger-strong: #d16969;
  --chart-1: #17a673;
  --chart-2: #2dbae1;
  --chart-3: #7574cf;
  --chart-4: #db7eba;
  --chart-5: #c26038;
  --chart-6: #b7a82e;
}

.hero-wash { background: var(--gradient-mint); }
.hero-wash::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(40% 40% at 8% 55%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%);
}
.band-dark { background: var(--x-band); color: var(--x-on-photo); }
.logo-mark { background: var(--gradient-logo); color: var(--x-on-photo); }
@keyframes float-y { from { transform: translateY(8px); } to { transform: translateY(0); } }
.float-in { animation: float-y .8s ease-out both; }
.caret { display: inline-block; width: 7px; height: 1em; background: var(--accent); vertical-align: -2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
html.reduced-motion .float-in, html.reduced-motion .caret { animation: none; }