/* Fraintesa & the Flowers — Typography tokens
   Two families: Familjen Grotesk Bold for display/labels, Satoshi for body.
   Geometric, friendly, calm. */

:root {
  /* Body text — Satoshi */
  --font-sans: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Display / headlines / labels — Familjen Grotesk (use Bold + Bold Italic) */
  --font-display: 'Familjen Grotesk', 'Satoshi', system-ui, -apple-system, sans-serif;

  /* Weights — the brand really only uses two */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* Type scale (1.25 major-third-ish, tuned) */
  --text-2xs: 0.6875rem;  /* 11px — micro labels */
  --text-xs:  0.75rem;    /* 12px */
  --text-sm:  0.875rem;   /* 14px */
  --text-base:1rem;       /* 16px */
  --text-lg:  1.25rem;    /* 20px */
  --text-xl:  1.5rem;     /* 24px */
  --text-2xl: 2rem;       /* 32px */
  --text-3xl: 2.75rem;    /* 44px */
  --text-4xl: 3.75rem;    /* 60px */
  --text-5xl: 5rem;       /* 80px */

  --leading-tight: 1.05;
  --leading-snug: 1.18;
  --leading-normal: 1.45;
  --leading-relaxed: 1.6;

  /* Brand display is set tight, with a hair of negative tracking */
  --tracking-display: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  /* Eyebrow / overline labels are uppercase with open tracking */
  --tracking-label: 0.14em;

  /* ——— Web page type scale (as built on the site) ———
     Three roles carry every page: main title (h1), secondary text, third text.
     Values are fixed px per breakpoint, not fluid clamps. */
  --web-title-desktop:     90px;
  --web-title-tablet:      70px;
  --web-title-mobile:      46px;

  --web-secondary-desktop: 42px;
  --web-secondary-tablet:  40px;
  --web-secondary-mobile:  30px;

  --web-third-desktop:     30px;
  --web-third-tablet:      30px;
  --web-third-mobile:      21px;

  /* Breakpoints the three steps map to */
  --bp-mobile-max:  768px;
  --bp-tablet-max:  1024px;
}