/* Hallmark · Caretakers homepage · design tokens
 * macrostructure: Marquee Hero · genre: editorial
 * theme: custom (warm-cream healthcare · Linen-adjacent)
 * paper: light (97.5%) · display: italic-serif (Fraunces) · accent: cool teal ~195°
 * nav: N1 minimal · footer: Ft5 Statement
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;1,9..144,300;1,9..144,600&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
  /* — Fonts — */
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body:    "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;

  /* — Colour (OKLCH only) — */
  --color-paper:    oklch(97.5% 0.008 85);
  --color-paper-2:  oklch(94%   0.010 85);
  --color-rule:     oklch(82%   0.008 80);
  --color-neutral:  oklch(60%   0.008 78);
  --color-muted:    oklch(44%   0.010 75);
  --color-ink:      oklch(16%   0.018 230);
  --color-ink-mid:  oklch(30%   0.010 230);
  --color-accent:   oklch(54%   0.14  195);
  --color-focus:    oklch(50%   0.18  195);
  --color-success:  oklch(47%   0.14  155);

  /* — Spacing (4pt scale) — */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-sm:  1rem;      /* 16px */
  --space-md:  1.5rem;    /* 24px */
  --space-lg:  2rem;      /* 32px */
  --space-xl:  3rem;      /* 48px */
  --space-2xl: 4rem;      /* 64px */
  --space-3xl: 6rem;      /* 96px */

  /* — Type scale (1.25 major-third, base 16px) — */
  --text-xs:        0.64rem;
  --text-sm:        0.8rem;
  --text-base:      1rem;
  --text-md:        1.25rem;
  --text-lg:        1.5625rem;
  --text-xl:        1.9531rem;
  --text-2xl:       2.4414rem;
  --text-3xl:       3.0518rem;
  --text-4xl:       3.8147rem;
  --text-display:   clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-display-s: clamp(1.75rem, 3vw + 0.75rem, 3rem);

  /* — Motion — */
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    500ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);

  /* — Shadows — */
  --shadow-focus-ring: 0 0 0 3px oklch(54% 0.14 195 / 0.15);
  --shadow-float:      0 4px 16px oklch(16% 0.018 230 / 0.25);

  /* — Misc — */
  --rule-width: 1px;
  --radius-none: 0;
}