/* TweetVid landing-page design system.
   Shared tokens and primitives live here. Section composition stays in
   landing-page.css. Values intentionally match the established UI. */

:root {
  /* Color roles */
  --lp-canvas: #f2ede3;
  --lp-surface: #fffdf8;
  --lp-surface-muted: #f3ede2;
  --lp-surface-strong: #e8dfd2;
  --lp-ink: #111c27;
  --lp-ink-soft: #1a2430;
  --lp-text: #586170;
  --lp-text-muted: #858d9b;
  --lp-accent: #111c27;
  --lp-accent-bg: #ede6da;
  --lp-success: #0f8a61;
  --lp-editorial-accent: #5b6987;
  --lp-white: #fff;

  /* Borders and elevation */
  --lp-border: rgba(17, 28, 39, 0.09);
  --lp-shadow-soft: 0 12px 36px rgba(17, 28, 39, 0.06);
  --lp-shadow-card: 0 20px 50px rgba(17, 28, 39, 0.08);
  --lp-shadow-button: 0 8px 20px rgba(17, 28, 39, 0.16);
  --lp-shadow-button-hover: 0 12px 28px rgba(17, 28, 39, 0.22);

  /* Shape */
  --lp-radius-lg: 24px;
  --lp-radius-md: 18px;
  --lp-radius-sm: 12px;
  --lp-radius-pill: 999px;

  /* Typography */
  --lp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --lp-display: 'Outfit', 'Inter', sans-serif;
  --lp-editorial: 'Instrument Serif', Georgia, serif;
  --lp-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Layout and rhythm */
  --lp-container-max: 1280px;
  --lp-page-gutter: 28px;
  --lp-page-bottom: 80px;
  --lp-section-space: 100px;
  --lp-section-scroll-offset: 90px;
  --lp-section-heading-gap: 36px;

  /* Controls and motion */
  --lp-control-height: 48px;
  --lp-control-padding-inline: 22px;
  --lp-motion-fast: 150ms;
}

body[data-marketing-site-url] {
  background: var(--lp-canvas);
  color: var(--lp-ink-soft);
  font-family: var(--lp-font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body[data-marketing-site-url] .lp-wrap,
body[data-marketing-site-url] .lp-wrap h1,
body[data-marketing-site-url] .lp-wrap h2,
body[data-marketing-site-url] .lp-wrap h3,
body[data-marketing-site-url] .lp-wrap h4,
body[data-marketing-site-url] .lp-wrap p,
body[data-marketing-site-url] .lp-wrap span,
body[data-marketing-site-url] .lp-wrap strong,
body[data-marketing-site-url] .lp-wrap div,
body[data-marketing-site-url] .lp-wrap li,
body[data-marketing-site-url] .lp-wrap article,
body[data-marketing-site-url] .lp-wrap svg,
body[data-marketing-site-url] .lp-wrap path {
  cursor: default;
}

body[data-marketing-site-url] .lp-wrap a,
body[data-marketing-site-url] .lp-wrap button,
body[data-marketing-site-url] .lp-wrap [role='button'],
body[data-marketing-site-url] .lp-wrap .lp-btn,
body[data-marketing-site-url] .lp-wrap .lp-faq-q {
  cursor: pointer;
}

body[data-marketing-site-url]::before {
  display: none !important;
}

.lp-wrap {
  position: relative;
  z-index: 1;
  max-width: var(--lp-container-max);
  margin: 0 auto;
  padding: 0 var(--lp-page-gutter) var(--lp-page-bottom);
}

.lp-section {
  padding-top: var(--lp-section-space);
  scroll-margin-top: var(--lp-section-scroll-offset);
}

.lp-section-head {
  margin-bottom: var(--lp-section-heading-gap);
}

.lp-section-head h2 {
  margin: 0 0 12px;
  font-size: clamp(30px, 4.2vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: var(--lp-ink);
}

.lp-section-head p {
  margin: 0;
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.7;
  color: var(--lp-text);
}

.lp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--lp-text-muted);
}

.lp-kicker::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lp-success);
}

.lp-editorial-italic {
  color: var(--lp-editorial-accent);
  font-family: var(--lp-editorial);
  font-style: italic;
  font-weight: 400;
}

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--lp-control-height);
  padding: 0 var(--lp-control-padding-inline);
  border: 1px solid transparent;
  border-radius: var(--lp-radius-sm);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--lp-motion-fast),
    box-shadow var(--lp-motion-fast),
    background var(--lp-motion-fast);
}

.lp-btn:hover {
  transform: translateY(-1px);
}

.lp-btn-dark {
  background: var(--lp-ink);
  color: var(--lp-surface);
  box-shadow: var(--lp-shadow-button);
}

.lp-btn-dark:hover {
  box-shadow: var(--lp-shadow-button-hover);
}

.lp-btn-light {
  background: var(--lp-surface);
  color: var(--lp-ink);
  border-color: var(--lp-border);
}

.lp-btn-light:hover {
  background: var(--lp-white);
}