/* Latbase design system · tokens · v1 (2026-09-27; 1.7.0 on 2026-10-31: the ring, the three elevations and the hover grey,
   borrowed from Latbase Host's round D so the two apps share one surface; 1.8.0 on 2026-11-01: Jost on the headings, as Host)
   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: #f3f3f5;             /* the grey fill: icon tiles, chips, the segmented track, a row under the pointer (retuned 1.7.0) */
  --paper-3: #e9e9ec;             /* the grey fill under the pointer (1.7.0) */
  --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;
  --font-display: Jost, var(--font-sans);   /* the headings (1.8.0, 2026-11-01): Jost at 500, as Latbase Host chose after the founder's three-font comparison; Inter on everything read or clicked. A page that does not load Jost falls back to Inter */
  --weight-display: 500;                    /* Jost's 600 is heavy; a geometric face wants less negative tracking than Inter did */
  --text-display: 64px;  --lh-display: 1.05; --ls-display: -0.015em;
  --text-h1: 48px;       --lh-h1: 1.1;       --ls-h1: -0.01em;
  --text-h2: 32px;       --lh-h2: 1.2;       --ls-h2: -0.005em;
  --text-h3: 22px;       --lh-h3: 1.25;      --ls-h3: 0;
  --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);
  /* Elevation (1.7.0, 2026-10-31, Latbase Host's round D after the founder's ElevenLabs reference): a hairline ring is the
     first layer of every shadow, so a white object on the white page has an edge, and the shadows are layers that double in
     size, each at 6 %: one for a control or a small bar, three for a card, five for a lifted card, a menu or a sheet. */
  --edge: 0 0 0 1px rgba(17, 17, 17, 0.08);
  --shadow-bar: var(--edge), 0 1px 1px -0.5px rgba(17, 17, 17, 0.06);   /* a control, the week strip's bars, the segmented thumb */
  --shadow-card: var(--edge), 0 1px 1px -0.5px rgba(17, 17, 17, 0.06), 0 3px 3px -1.5px rgba(17, 17, 17, 0.06), 0 6px 6px -3px rgba(17, 17, 17, 0.06);   /* a raised object at rest */
  --shadow-hover: var(--edge), 0 1px 1px -0.5px rgba(17, 17, 17, 0.06), 0 3px 3px -1.5px rgba(17, 17, 17, 0.06), 0 6px 6px -3px rgba(17, 17, 17, 0.06), 0 12px 12px -6px rgba(17, 17, 17, 0.06), 0 24px 24px -12px rgba(17, 17, 17, 0.06);   /* lifted: under the pointer, a menu, a sheet */
  --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;
  }
}