/* Latbase design system · tokens · v1 (2026-09-27)
   Black text on white paper, Inter, colour only from imagery. See README.md. */
:root {
  /* ink and paper */
  --ink: #111111;
  --ink-2: rgba(17, 17, 17, 0.62);
  --ink-3: rgba(17, 17, 17, 0.42);
  --line: rgba(17, 17, 17, 0.08);
  --line-strong: rgba(17, 17, 17, 0.16);
  --paper: #ffffff;
  --paper-2: #f5f5f7;
  --on-ink: #ffffff;

  /* accents: one per industry, used only inside artwork, chips and tags. ground = light fill, figure = the shape */
  --moss-ground: #e6eee2;    --moss: #2f5e3e;
  --ocean-ground: #e3ecf5;   --ocean: #1e4b7a;
  --clay-ground: #f5e6de;    --clay: #a5462a;
  --saffron-ground: #f8ecd2; --saffron: #b5771a;
  --plum-ground: #ece4f3;    --plum: #5b3c7c;
  --slate-ground: #e9ebef;   --slate: #3b4753;
  --teal-ground: #ddefec;    --teal: #17685f;
  --sand-ground: #f1ebdf;    --sand: #7c6242;

  /* type */
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --text-display: 64px;  --lh-display: 1.05; --ls-display: -0.03em;
  --text-h1: 48px;       --lh-h1: 1.1;       --ls-h1: -0.025em;
  --text-h2: 32px;       --lh-h2: 1.2;       --ls-h2: -0.02em;
  --text-h3: 22px;       --lh-h3: 1.25;      --ls-h3: -0.01em;
  --text-lead: 19px;     --lh-lead: 1.5;
  --text-body: 17px;     --lh-body: 1.55;
  --text-small: 15px;    --lh-small: 1.45;
  --text-caption: 13px;  --lh-caption: 1.4;
  --text-eyebrow: 12px;  --ls-eyebrow: 0.08em;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600;

  /* corners */
  --radius-card: 24px;
  --radius-media: 20px;
  --radius-tile: 20px;
  --radius-input: 14px;
  --radius-bar: 12px;
  --radius-pill: 999px;

  /* space: an 8 px grid */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px;
  --space-16: 64px; --space-22: 88px; --space-30: 120px;
  --page-margin: 80px;
  --content-max: 1280px;
  --card-gap: 24px;
  --section-gap: 88px;

  /* motion and elevation */
  --dur: 240ms;
  --dur-fast: 160ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.08);
  --lift: -2px;

  /* controls */
  --control-h: 48px;
  --control-h-sm: 44px;
  --chip-h: 32px;
  --search-h: 56px;
}

@media (max-width: 767px) {
  :root {
    --text-display: 40px;
    --text-h1: 34px;
    --text-h2: 24px;
    --text-h3: 19px;
    --text-lead: 17px;
    --page-margin: 20px;
    --section-gap: 56px;
    --card-gap: 14px;
    --radius-card: 20px;
    --radius-media: 16px;
  }
}