/* Kalimi — Typography. Primary typeface: Satoshi (Fontshare, the font's own foundry CDN).
   Font binaries were not supplied in uploads/, so the genuine Satoshi is loaded from Fontshare.
   Swap this @import for self-hosted @font-face rules if you have the .otf files. */
@import url("https://api.fontshare.com/v2/css?f[]=satoshi@300,301,400,401,500,501,700,701,900,901&display=swap");

:root {
  --font-sans: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);

  /* Weights */
  --fw-light: 300;   /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500;  /* @kind font */
  --fw-bold: 700;    /* @kind font */
  --fw-black: 900;   /* @kind font */

  /* Type scale (px). Transcribed from the Typography frame + live screens. */
  --fs-hero: 64px;      /* OG / marketing hero */
  --fs-display: 56px;
  --fs-h1: 40px;
  --fs-h2: 32px;
  --fs-h3: 24px;        /* Feature */
  --fs-h4: 20px;
  --fs-body-lg: 18px;   /* Highlight */
  --fs-body: 16px;      /* Content */
  --fs-body-sm: 14px;   /* Caption */
  --fs-caption: 13px;
  --fs-micro: 12px;

  /* Line heights */
  --lh-tight: 1.1;    /* @kind font */
  --lh-heading: 1.3;  /* @kind font */
  --lh-body: 1.5;     /* @kind font */
  --lh-snug: 1.45;    /* @kind font */

  /* Letter spacing */
  --ls-tight: -0.02em;   /* headings */
  --ls-snug: -0.01em;
  --ls-body: -0.005em;
}

/* Base document type */
html { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { color: var(--text-primary); font-size: var(--fs-body); line-height: var(--lh-body); }

/* Utility type classes — optional helpers mirroring the Figma text styles */
.t-hero    { font-size: var(--fs-hero); font-weight: var(--fw-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-tight); }
.t-display { font-size: var(--fs-display); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.t-h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-tight); }
.t-h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-tight); }
.t-h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-snug); }
.t-h4 { font-size: var(--fs-h4); font-weight: var(--fw-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-snug); }
.t-body-lg { font-size: var(--fs-body-lg); font-weight: var(--fw-medium); line-height: var(--lh-body); }
.t-body { font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: var(--lh-body); letter-spacing: var(--ls-body); }
.t-body-sm { font-size: var(--fs-body-sm); font-weight: var(--fw-medium); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); }
.t-caption { font-size: var(--fs-caption); font-weight: var(--fw-medium); line-height: var(--lh-snug); }