/*
  PewPush marketing theme (Candlelight + Rows Forward logo).
  Source of truth: tokens/marketing.tokens.json. Keep the two in sync.
  Fonts are self-hosted, like the app: copy these files into the marketing
  app's public/fonts/ (from apps/web/public/fonts/) with their OFL licences
  from docs/font-licenses/: inter.woff2, bricolage-grotesque.woff2, jetbrains-mono.woff2.
  Rule: coral is decoration only. It never carries text.
*/

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour */
  --pp-page: #F8F7FB;
  --pp-surface: #FFFFFF;
  --pp-header: #FFFEFC;
  --pp-band: #EDECF8;
  --pp-ink: #1F1A3D;
  --pp-ink-soft: #3A3556;
  --pp-muted: #57536E;
  --pp-primary: #2E2A6B;
  --pp-primary-hover: #231F57;
  --pp-primary-foreground: #FFFFFF;
  --pp-coral: #F07F4F; /* decoration only */
  --pp-border: #E7E4EE;
  --pp-border-strong: #D9D5E4;
  --pp-on-dark: #FFFFFF;
  --pp-on-dark-muted: #D9D5E4;
  --pp-focus: #2E2A6B;

  /* Type */
  --pp-font-display: "Bricolage Grotesque", Inter, system-ui, sans-serif;
  --pp-font-sans: Inter, system-ui, sans-serif;
  --pp-font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --pp-text-h1: 56px;
  --pp-text-h2: 36px;
  --pp-text-h3: 18px;
  --pp-text-lead: 19px;
  --pp-text-body: 17px;
  --pp-text-small: 14px;
  --pp-text-eyebrow: 13px;

  /* Shape and space */
  --pp-radius-button: 10px;
  --pp-radius-field: 8px;
  --pp-radius-card: 14px;
  --pp-radius-feature: 16px;
  --pp-radius-pill: 999px;
  --pp-gutter: 16px;
  --pp-container: 1120px;
  --pp-section: 80px;
  --pp-touch: 44px;

  /* Motion (same timings as the app) */
  --pp-t-fast: 140ms;
  --pp-t-base: 240ms;
}

@media (max-width: 640px) {
  :root {
    --pp-text-h1: 40px;
    --pp-text-h2: 28px;
    --pp-text-lead: 17px;
    --pp-section: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --pp-t-fast: 1ms; --pp-t-base: 1ms; }
}

/* Base */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--pp-page);
  color: var(--pp-ink);
  font-family: var(--pp-font-sans);
  font-size: var(--pp-text-body);
  line-height: 1.5;
}
h1, h2 {
  font-family: var(--pp-font-display);
  font-weight: 800;
  color: var(--pp-ink);
  margin: 0;
}
h1 { font-size: var(--pp-text-h1); line-height: 1.05; letter-spacing: -0.02em; }
h2 { font-size: var(--pp-text-h2); line-height: 1.15; letter-spacing: -0.01em; }
h3 { font-size: var(--pp-text-h3); font-weight: 700; line-height: 1.3; margin: 0; }
p { margin: 0; }
a { color: var(--pp-ink); }
a:hover { color: var(--pp-primary); }
:focus-visible { outline: 2px solid var(--pp-focus); outline-offset: 3px; }

/* Layout helpers */
.pp-wrap { max-width: var(--pp-container); margin: 0 auto; padding: 0 var(--pp-gutter); box-sizing: border-box; }
.pp-section { padding: var(--pp-section) 0; }
.pp-band { background: var(--pp-band); }
.pp-alt { background: var(--pp-surface); border-block: 1px solid var(--pp-border); }
.pp-dark { background: var(--pp-ink); color: var(--pp-on-dark); }
.pp-dark h1, .pp-dark h2 { color: var(--pp-on-dark); }
.pp-dark p { color: var(--pp-on-dark-muted); }

/* Text styles */
.pp-eyebrow {
  font-size: var(--pp-text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pp-primary);
}
.pp-lead { font-size: var(--pp-text-lead); color: var(--pp-ink-soft); }
.pp-muted { color: var(--pp-muted); }
.pp-small { font-size: var(--pp-text-small); color: var(--pp-muted); }
.pp-wordmark { font-family: var(--pp-font-display); font-weight: 800; letter-spacing: -0.035em; }

/* Buttons */
.pp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--pp-touch);
  padding: 12px 22px;
  border-radius: var(--pp-radius-button);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--pp-t-fast), color var(--pp-t-fast);
  box-sizing: border-box;
}
.pp-btn-primary { background: var(--pp-primary); color: var(--pp-primary-foreground); border: 1px solid var(--pp-primary); }
.pp-btn-primary:hover { background: var(--pp-primary-hover); color: var(--pp-primary-foreground); }
.pp-btn-secondary { background: transparent; color: var(--pp-ink); border: 1px solid var(--pp-ink); }
.pp-btn-secondary:hover { background: var(--pp-surface); color: var(--pp-primary); }
/* On dark banners: white button with a coral ring (the ring is decoration). */
.pp-btn-on-dark { background: var(--pp-on-dark); color: var(--pp-ink); border: 0; box-shadow: 0 0 0 3px var(--pp-coral); }

/* Cards and fields */
.pp-card { background: var(--pp-surface); border: 1px solid var(--pp-border); border-radius: var(--pp-radius-card); padding: 24px; }
.pp-card-feature { border: 2px solid var(--pp-primary); border-radius: var(--pp-radius-feature); padding: 32px; background: var(--pp-surface); }
.pp-field {
  font: inherit;
  font-size: 16px; /* 16px stops iOS zooming on focus */
  min-height: var(--pp-touch);
  padding: 12px;
  border: 1px solid var(--pp-border-strong);
  border-radius: var(--pp-radius-field);
  background: var(--pp-surface);
  color: var(--pp-ink);
  width: 100%;
  box-sizing: border-box;
}
.pp-field:focus-visible { border-color: var(--pp-primary); }