/* Self-hosted fonts (SIL OFL). Served from /assets/fonts so the privacy-first
 * site makes no runtime request to Google Fonts — nothing, not even a font GET,
 * leaves the visitor's device for a third party. Latin subset only (English UI;
 * the latin range already covers Western accents + curly quotes / em dashes used
 * on the legal pages). Hanken Grotesk ships as a single variable file. */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-600.woff2') format('woff2');
}

/* PDF Desk marketing site styles — the marketing/legal pages load this. It owns
 * the site footer + design tokens + the landing layout. The web app at /app is now
 * a self-contained Dioxus bundle with its own app.css and does NOT load this file
 * (the `body.app-shell` block below is legacy from the old server-rendered shell —
 * dead, but kept until the marketing CSS is next reworked).
 *
 * Two distinct visual languages live here, kept apart:
 *   - Legacy web-app shell (body.app-shell): the warm-paper / inky-blue
 *     design-system palette (tokens below), which goes dark on a dark OS. No page
 *     uses it anymore.
 *   - The marketing landing (body.mk) uses the same warm-paper / inky-blue
 *     design-system palette (scoped tokens further down). It is light-only and
 *     self-contained: its own header/footer, not the shared .site-* chrome.
 *
 * The brand/neutral tokens below are mirrored in frontend/src/app.css (which the
 * native app uses on its own). Keep the shared tokens in sync. */
:root {
  /* Warm paper neutrals + inky-blue accent (light). */
  --paper-0: oklch(0.992 0.004 90);
  --paper-1: oklch(0.978 0.005 90);
  --paper-2: oklch(0.960 0.006 88);
  --paper-3: oklch(0.930 0.008 86);
  --line-strong: oklch(0.800 0.010 84);
  --accent-on: oklch(0.992 0.004 90);

  --bg: var(--paper-0);
  --panel: var(--paper-1);
  --ink: oklch(0.185 0.018 64);
  --muted: oklch(0.620 0.012 80);
  --line: oklch(0.890 0.008 85);
  --brand: oklch(0.520 0.110 255);
  --brand-ink: var(--accent-on);
  --accent: oklch(0.520 0.110 255);
  --font-sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-mono: var(--mono);
}

/* Dark mode applies to the web app shell only, never the marketing landing.
   These mirror the warm-charcoal dark palette in frontend/src/app.css so the web
   app shell matches the native app; keep the shared tokens in sync. */
@media (prefers-color-scheme: dark) {
  body.app-shell {
    --paper-0: oklch(0.205 0.008 72);
    --paper-1: oklch(0.240 0.009 73);
    --paper-2: oklch(0.285 0.010 74);
    --paper-3: oklch(0.330 0.012 74);
    --line-strong: oklch(0.470 0.014 76);
    --bg: var(--paper-0);
    --panel: var(--paper-1);
    --ink: oklch(0.962 0.008 88);
    --muted: oklch(0.580 0.012 78);
    --line: oklch(0.360 0.012 74);
    --brand: oklch(0.700 0.115 255);
    --accent: oklch(0.700 0.115 255);
    --accent-on: oklch(0.180 0.018 260);
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* ============================================================
   Marketing landing (templates/index.html) — imported "Marketing" UI kit.
   Warm-paper neutrals + inky-blue accent, square corners, mono metadata.
   The whole palette is scoped to body.mk so it never touches the app shell;
   light-only by design. Token values track the design system 1:1. */
body.mk {
  /* warm paper neutrals (light) */
  --paper-0: oklch(0.992 0.004 90);
  --paper-1: oklch(0.978 0.005 90);
  --paper-2: oklch(0.960 0.006 88);
  --paper-3: oklch(0.930 0.008 86);
  --paper-4: oklch(0.895 0.009 85);
  /* warm ink (text + lines) */
  --line: oklch(0.890 0.008 85);
  --line-strong: oklch(0.800 0.010 84);
  --ink-3: oklch(0.620 0.012 80);
  --ink-2: oklch(0.450 0.014 76);
  --ink-1: oklch(0.275 0.016 70);
  --ink-0: oklch(0.185 0.018 64);
  /* accent: inky blue */
  --accent: oklch(0.520 0.110 255);
  --accent-on: oklch(0.992 0.004 90);
  /* semantic */
  --success: oklch(0.560 0.100 150);
  --success-tint: oklch(0.955 0.030 150);
  /* warm shadow */
  --shadow-rgb: 47 38 22;

  /* semantic aliases — what the markup consumes */
  --bg-app: var(--paper-0);
  --surface: var(--paper-1);
  --border: var(--line);
  --border-strong: var(--line-strong);
  --text-heading: var(--ink-0);
  --text-primary: var(--ink-1);
  --text-secondary: var(--ink-2);
  --text-tertiary: var(--ink-3);
  --primary: var(--accent);
  --on-primary: var(--accent-on);
  --selection-ring: var(--accent);

  --shadow-sm: 0 1px 2px rgb(var(--shadow-rgb) / 0.07);
  --shadow-lg: 0 10px 30px rgb(var(--shadow-rgb) / 0.14), 0 2px 6px rgb(var(--shadow-rgb) / 0.08);
  --ring-select: 0 0 0 2px var(--selection-ring);
  --radius-full: 999px;

  --font-sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  background: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-sans);
}

/* Utility classes from the kit's <style> block (scoped). */
.mk .wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
.mk .eyebrow { font: 500 12px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-tertiary); }
.mk .btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 20px;
  font: 500 15px/1 var(--font-sans); cursor: pointer;
  border: 1px solid transparent; white-space: nowrap;
  transition: filter .15s ease;
}
.mk .btn:hover { filter: brightness(0.96); }
.mk .btn-primary { background: var(--primary); color: var(--on-primary); }
.mk .btn-secondary { background: var(--surface); color: var(--text-primary); border-color: var(--border-strong); }
.mk .navlink { font: 500 14px/1 var(--font-sans); color: var(--text-secondary); white-space: nowrap; }
.mk .navlink:hover { color: var(--text-primary); }
.mk .tile {
  width: 78px; height: 101px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  overflow: hidden; display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.mk .lines { width: 74%; display: flex; flex-direction: column; gap: 3.5px; }
.mk .lines > i { height: 2.2px; background: var(--paper-3); display: block; }
.mk .ico { display: inline-block; vertical-align: middle; flex: 0 0 auto; }
.mk .btn-row { flex-wrap: wrap; }

/* Legal pages (templates/privacy.html, templates/terms.html) — long-form prose
   sitting on the same marketing chrome. Light-only and scoped to body.mk like
   the rest of the landing. A single readable column with the kit's type ramp. */
.mk .legal { max-width: 760px; margin: 0 auto; padding: 64px 32px 96px; }
.mk .legal h1 { margin: 14px 0 0; font: 700 44px/1.06 var(--font-sans); letter-spacing: -.025em; color: var(--text-heading); }
.mk .legal .updated { margin: 14px 0 0; font: 500 12px/1 var(--font-mono); letter-spacing: .04em; color: var(--text-tertiary); }
.mk .legal .lead { margin: 28px 0 0; font: 400 18px/1.65 var(--font-sans); color: var(--text-secondary); }
.mk .legal h2 { margin: 44px 0 0; font: 700 22px/1.3 var(--font-sans); letter-spacing: -.01em; color: var(--text-heading); }
.mk .legal p { margin: 14px 0 0; font: 400 16px/1.7 var(--font-sans); color: var(--text-secondary); }
.mk .legal ul { margin: 14px 0 0; padding-left: 22px; }
.mk .legal li { margin-top: 8px; font: 400 16px/1.7 var(--font-sans); color: var(--text-secondary); }
.mk .legal strong { font-weight: 600; color: var(--text-primary); }
.mk .legal a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.mk .legal a:hover { filter: brightness(0.92); }
.mk .legal .callout {
  display: flex; gap: 14px; align-items: flex-start;
  margin: 32px 0 0; padding: 20px 22px;
  background: var(--paper-1); border: 1px solid var(--border);
}
.mk .legal .callout p { margin: 0; color: var(--text-primary); }

/* Contact page (templates/contact.html) — the Web3Forms form sitting on the same
   legal/marketing chrome. Square fields to match the kit; scoped to body.mk. */
.mk .contact-form {
  margin: 36px 0 0; padding: 36px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.mk .contact-field { margin-top: 22px; }
.mk .contact-field:first-of-type { margin-top: 0; }
.mk .contact-field label { display: block; margin-bottom: 8px; font: 600 13px/1 var(--font-sans); color: var(--text-primary); }
.mk .contact-field input,
.mk .contact-field textarea {
  width: 100%; padding: 12px 14px;
  background: var(--paper-0); border: 1px solid var(--border-strong);
  font: 400 15px/1.5 var(--font-sans); color: var(--text-primary);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mk .contact-field input::placeholder,
.mk .contact-field textarea::placeholder { color: var(--text-tertiary); }
.mk .contact-field input:focus,
.mk .contact-field textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 20%, transparent);
}
.mk .contact-field textarea { min-height: 140px; resize: vertical; }
.mk .contact-submit {
  margin-top: 28px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 24px; border: 1px solid transparent;
  font: 600 15px/1 var(--font-sans); cursor: pointer;
  background: var(--primary); color: var(--on-primary);
  transition: filter .15s ease;
}
.mk .contact-submit:hover { filter: brightness(0.96); }
.mk .contact-submit:disabled { opacity: .6; cursor: progress; }
.mk .contact-result { display: none; margin: 18px 0 0; padding: 14px 16px; font: 500 14px/1.5 var(--font-sans); border: 1px solid var(--border); }
.mk .contact-result.is-ok { display: block; background: var(--success-tint); border-color: color-mix(in oklch, var(--success) 35%, var(--border)); color: var(--success); }
.mk .contact-result.is-err { display: block; background: var(--paper-2); border-color: var(--border-strong); color: var(--text-primary); }

/* Marketing landing — responsive. The three-up grids stack, the hero scales
   down, and the secondary nav links fold away on small screens. */
@media (max-width: 880px) {
  .mk .wrap { padding: 0 20px; }
  .mk .nav-links, .mk .nav-secondary { display: none !important; }
  .mk .hero { padding-top: 56px !important; }
  .mk .hero-title { font-size: clamp(36px, 9vw, 52px) !important; }
  .mk .privacy-grid { grid-template-columns: 1fr !important; gap: 22px !important; }
  .mk .feature-grid { grid-template-columns: 1fr !important; }
  .mk .usecase-row { grid-template-columns: 1fr !important; gap: 6px !important; }
  .mk .steps-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .mk .cta-block { padding: 40px 24px !important; }
  .mk .cta-block h2 { font-size: 26px !important; }
  .mk .legal { padding: 44px 20px 72px; }
  .mk .legal h1 { font-size: clamp(32px, 8vw, 40px); }
  .mk .contact-form { padding: 24px 20px; }
}
@media (max-width: 560px) {
  .mk .hero { padding-left: 20px !important; padding-right: 20px !important; }
  .mk .hero .btn-row { flex-direction: column; align-items: stretch; }
  .mk .hero .btn {
    justify-content: center; width: 100%; height: auto; min-height: 46px;
    padding: 12px 16px; line-height: 1.25; white-space: normal;
  }
  .mk .footer-row { flex-wrap: wrap; }
}