/* ===========================================================================
   Tota's Shop — Typography Tokens
   Baloo 2 (puffy display) + Quicksand (rounded body) + Caveat (marker accent).
   Friendly, rounded, generous. Headings lean berry & bold; body stays soft.
   =========================================================================== */
:root {
  /* --- Families --- */
  --font-display: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --font-body:    'Quicksand', 'Trebuchet MS', system-ui, sans-serif;
  --font-accent:  'Caveat', 'Comic Sans MS', cursive;

  /* --- Weights --- */
  --fw-regular: 400;  /* @kind font */
  --fw-medium:  500;  /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:    700;  /* @kind font */
  --fw-black:   800;  /* @kind font */

  /* --- Type scale (rem, 16px base) — generous & rounded --- */
  --text-xs:   0.75rem;   /* 12px  micro labels */
  --text-sm:   0.875rem;  /* 14px  helper, captions */
  --text-base: 1rem;      /* 16px  body */
  --text-md:   1.125rem;  /* 18px  lead body */
  --text-lg:   1.375rem;  /* 22px  card titles */
  --text-xl:   1.75rem;   /* 28px  section titles */
  --text-2xl:  2.25rem;   /* 36px  page titles */
  --text-3xl:  3rem;      /* 48px  hero */
  --text-4xl:  4rem;      /* 64px  display hero */

  /* --- Line heights --- */
  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* --- Letter spacing --- */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.12em;  /* uppercase eyebrow labels */

  /* --- Semantic roles --- */
  --type-hero-family: var(--font-display);
  --type-hero-weight: var(--fw-black);
  --type-heading-family: var(--font-display);
  --type-heading-weight: var(--fw-bold);
  --type-body-family: var(--font-body);
  --type-body-weight: var(--fw-medium);
  --type-label-family: var(--font-body);
  --type-label-weight: var(--fw-semibold);
  --type-accent-family: var(--font-accent);
}