/* ============================================================
   KINO — design tokens & shared styles (landing page subset)
   Source of truth: the design handoff's kino/tokens.css, which
   mirrors src/theme/tokens.ts in the app (same hex values; the
   app names the page background "background" and white surfaces
   "paper"; here those are --k-paper and --k-paper-raised).
   Fonts load from the HTML head (preconnect + link), not @import.
   ============================================================ */

:root {
  /* color — paper & ink */
  --k-paper: #FAF7F1;
  --k-paper-raised: #FFFFFF;
  --k-paper-dim: #F2EEE5;
  --k-ink: #181611;
  --k-ink-soft: #57534A;
  --k-ink-faint: #8C877B;
  --k-line: #E4DFD3;
  --k-line-soft: #EFEBE1;
  --k-line-ink: #181611;

  /* accent — vermilion (the kino period) */
  --k-accent: #C73E1D;
  --k-accent-deep: #993016;
  --k-accent-tint: #F8E6DF;

  /* semantic */
  --k-ok: #2D6A4A;
  --k-danger: #993016;

  /* type */
  --k-font: "Schibsted Grotesk", system-ui, sans-serif;
  --k-mono: "Spline Sans Mono", ui-monospace, monospace;

  /* radius */
  --k-r-sm: 6px;
  --k-r-md: 10px;
  --k-r-lg: 14px;
  --k-r-pill: 999px;

  /* spacing scale: 4 8 12 16 20 24 32 40 */
  --k-s1: 4px; --k-s2: 8px; --k-s3: 12px; --k-s4: 16px;
  --k-s5: 20px; --k-s6: 24px; --k-s7: 32px; --k-s8: 40px;

  /* shadow */
  --k-shadow-card: 0 1px 2px rgba(24,22,17,0.04), 0 4px 14px rgba(24,22,17,0.04);
  --k-shadow-pop: 0 8px 28px rgba(24,22,17,0.14);
}

/* ---------- type styles ---------- */
.k-display {
  font-family: var(--k-font);
  font-size: 44px; line-height: 0.98; font-weight: 800;
  letter-spacing: -0.03em; color: var(--k-ink);
}
.k-h2 {
  font-family: var(--k-font);
  font-size: 19px; line-height: 1.2; font-weight: 700;
  letter-spacing: -0.015em; color: var(--k-ink);
}
.k-h3 {
  font-family: var(--k-font);
  font-size: 16px; line-height: 1.3; font-weight: 700;
  letter-spacing: -0.01em; color: var(--k-ink);
}
.k-caption {
  font-family: var(--k-font);
  font-size: 12.5px; line-height: 1.4; color: var(--k-ink-faint);
}
.k-meta {
  font-family: var(--k-mono);
  font-size: 11px; line-height: 1.4; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--k-ink-faint);
}
.k-meta-accent { color: var(--k-accent); }
.k-meta-ink { color: var(--k-ink); }

/* ---------- wordmark ---------- */
.k-wordmark {
  font-family: var(--k-font);
  font-weight: 800; letter-spacing: -0.045em; line-height: 1;
  color: var(--k-ink);
}
.k-wordmark .dot { color: var(--k-accent); }

/* ---------- rules ---------- */
.k-rule { height: 1px; background: var(--k-line); border: none; margin: 0; }
.k-rule-ink { height: 1.5px; background: var(--k-ink); border: none; margin: 0; }

/* ---------- buttons ---------- */
.k-btn {
  font-family: var(--k-font);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; padding: 0 24px; border-radius: var(--k-r-md);
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  border: 1px solid transparent; cursor: pointer; width: 100%;
  box-sizing: border-box;
}
.k-btn-primary { background: var(--k-ink); color: var(--k-paper); }
.k-btn-accent { background: var(--k-accent); color: #FFF; }

/* ---------- inputs ---------- */
.k-input {
  font-family: var(--k-font);
  min-height: 52px; box-sizing: border-box; width: 100%;
  border: 1px solid var(--k-line); border-radius: var(--k-r-md);
  background: var(--k-paper-raised); padding: 0 16px;
  font-size: 16px; color: var(--k-ink);
  display: flex; align-items: center;
}

/* ---------- photo placeholder (striped) ---------- */
.k-photo-ph {
  background: repeating-linear-gradient(
    -45deg, var(--k-paper-dim), var(--k-paper-dim) 6px,
    #E9E4D9 6px, #E9E4D9 7px);
  border-radius: var(--k-r-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--k-ink-faint);
  font-family: var(--k-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow: hidden;
}

/* ---------- privacy footnote ---------- */
.k-footnote {
  display: flex; gap: 10px; align-items: baseline;
  font-family: var(--k-font); font-size: 12.5px; line-height: 1.45;
  color: var(--k-ink-faint);
}
.k-footnote .mark { font-family: var(--k-mono); font-size: 11px; color: var(--k-ink-soft); }