/* Portaki — Typography tokens
   Display: Cal Sans (self-hosted, copied from portaki-web/public/fonts).
   Body: Geist. Mono: Geist Mono. Both loaded from Google Fonts (Vercel ships Geist there).
   NOTE for maintainers: if Google Fonts CDN is unavailable in your environment, self-host
   Geist via https://fontsource.org/fonts/geist-sans and /geist-mono instead. */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap");

@font-face {
  font-family: "Cal Sans";
  src: url("../assets/fonts/CalSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cal Sans";
  src: url("../assets/fonts/CalSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Font families ────────────────────────────────────────── */
  --font-sans: "Geist", system-ui, sans-serif;         /* UI body, nav, labels, forms */
  --font-mono: "Geist Mono", ui-monospace, monospace;  /* slugs, IDs, prices, dates */
  --font-display: "Cal Sans", "Geist", sans-serif;     /* titles ONLY — h1/h2, card/modal titles */

  /* ── Type scale (px) ──────────────────────────────────────── */
  --text-display-56: 56px;  /* hero display, Cal Sans 600 */
  --text-display-32: 32px;  /* section heading, Cal Sans 600 */
  --text-title-20: 20px;    /* page header title, Cal Sans 600 */
  --text-title-19: 19px;    /* modal/sheet title, Cal Sans 600 */
  --text-body-lg: 18px;     /* landing intro body */
  --text-body: 15px;        /* card body copy */
  --text-body-sm: 13px;     /* helper text under fields */
  --text-label: 12px;       /* table header labels, uppercase, tracked */
  --text-caption: 11px;     /* pills, badges, mono codes */

  /* ── Letter-spacing (display uses negative tracking) ─────── */
  --tracking-display: -0.02em;
  --tracking-display-tight: -0.03em;
  --tracking-mono: 0.04em;
  --tracking-label: 0.06em;
}

.font-display {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display);
}

.font-mono-tight {
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-mono);
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg-page);
}

p, li {
  text-wrap: pretty;
}