/* Drops — typography.
   Display: Sora, thin weights (200 hero / 300 section heads).
   Body & UI: Manrope, light-to-medium (300–500). Mono only for image-placeholder explainers. */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600&family=Sora:wght@200;300;400&display=swap");

:root {
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* Display (Sora) */
  --type-hero-size: 48px;      --type-hero-weight: 200; --type-hero-lh: 1.12; --type-hero-ls: -0.02em;
  --type-h2-size: 23px;        --type-h2-weight: 300;   --type-h2-lh: 1.25;
  --type-h2-lg-size: 27px;     /* footer / CTA headline */

  /* Body & UI (Manrope) */
  --type-body-size: 15px;      --type-body-lh: 1.65;
  --type-card-size: 13.5px;    --type-card-lh: 1.5;
  --type-ui-size: 12.5px;      --type-ui-weight: 500;
  --type-meta-size: 12px;
  --type-row-title-size: 15px; --type-row-title-weight: 400;

  /* Labels — uppercase, tracked */
  --type-kicker-size: 12px;    --type-kicker-ls: 0.1em;   /* section kicker, accent-hi */
  --type-label-size: 11px;     --type-label-ls: 0.08em;   /* form labels, row kinds, soft */
  --type-tag-size: 10px;       --type-tag-ls: 0.1em;      /* card category, accent */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}
a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.85; }