/* ==========================================================================
   Design tokens — Happy Care Home Plus
   Palette sampled directly from HappyCareLogo.png:
   navy roofline & wordmark, teal cupped hands, gold heart.

   Direction: "warm, not clinical." The competitive advantage of a twelve-resident
   home is that it is not an institution, so surfaces are warm cream rather than
   hospital white and gold is reserved exclusively for primary calls to action.
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --navy-900: #0d2843;
  --navy-800: #123a63;
  --navy-700: #1b4a7e;   /* primary — logo wordmark */
  --navy-600: #2a5f96;
  --navy-500: #3c76ad;
  --navy-100: #dde8f2;
  --navy-050: #eef4f9;

  --teal-700: #2d7a72;
  --teal-600: #3e9a90;   /* secondary — the cupped hands */
  --teal-500: #55b0a6;
  --teal-100: #d9ede9;
  --teal-050: #eaf6f4;

  --gold-700: #c98f06;
  --gold-600: #e8ac16;
  --gold-500: #fbc02d;   /* accent — the heart. Primary CTAs only. */
  --gold-200: #fde9b5;
  --gold-100: #fef4dd;

  /* --- Neutrals: warmed, never pure grey ------------------------------- */
  --ink-900: #12212f;    /* body text */
  --ink-700: #33475a;
  --ink-600: #4e6375;
  --ink-500: #6b7f90;    /* 4.6:1 on cream — the lightest text we allow */
  --ink-300: #b9c4cd;
  --ink-200: #dbe2e8;
  --ink-100: #ebeff2;

  --cream-100: #fdf9f2;  /* page background */
  --cream-200: #f8f2e7;
  --cream-300: #f1e8d8;
  --white: #ffffff;

  /* --- Semantic -------------------------------------------------------- */
  --bg: var(--cream-100);
  --bg-raised: var(--white);
  --bg-sunken: var(--cream-200);
  --bg-invert: var(--navy-900);

  --text: var(--ink-900);
  --text-muted: var(--ink-600);
  --text-subtle: var(--ink-500);
  --text-invert: #f3f7fa;
  --text-invert-muted: #b6c8d8;

  --border: var(--ink-200);
  --border-strong: var(--ink-300);

  --focus: var(--teal-600);
  --error: #b3261e;
  --success: #1d6f4a;

  /* --- Typography ------------------------------------------------------ */
  /* System stacks by default: zero network requests, instant first paint.
     Drop Fraunces/Inter woff2 files into assets/fonts/ and add @font-face
     declarations — these stacks already name them first, so they take over
     automatically with no other change. */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino,
                  'Book Antiqua', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;

  /* Fluid scale. Base lands at 18px because the audience is elderly residents
     and their fifty-something children, frequently on phones. */
  --fs-xs:   clamp(0.8125rem, 0.80rem + 0.08vw, 0.875rem);
  --fs-sm:   clamp(0.9375rem, 0.92rem + 0.10vw, 1rem);
  --fs-base: clamp(1.0625rem, 1.04rem + 0.13vw, 1.125rem);
  --fs-lg:   clamp(1.1875rem, 1.14rem + 0.24vw, 1.3125rem);
  --fs-xl:   clamp(1.375rem, 1.29rem + 0.42vw, 1.625rem);
  --fs-2xl:  clamp(1.625rem, 1.47rem + 0.77vw, 2.125rem);
  --fs-3xl:  clamp(2rem, 1.73rem + 1.34vw, 2.875rem);
  --fs-4xl:  clamp(2.375rem, 1.90rem + 2.37vw, 3.75rem);

  --lh-tight: 1.12;
  --lh-snug: 1.28;
  --lh-body: 1.65;

  --ls-tight: -0.022em;
  --ls-wide: 0.08em;

  /* --- Spacing (4px base) ---------------------------------------------- */
  --sp-1: 0.25rem;   --sp-2: 0.5rem;    --sp-3: 0.75rem;
  --sp-4: 1rem;      --sp-5: 1.25rem;   --sp-6: 1.5rem;
  --sp-8: 2rem;      --sp-10: 2.5rem;   --sp-12: 3rem;
  --sp-16: 4rem;     --sp-20: 5rem;     --sp-24: 6rem;

  /* Vertical rhythm between page sections, fluid across breakpoints. */
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* --- Layout ---------------------------------------------------------- */
  --container: 74rem;
  --container-narrow: 46rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* --- Radii: generous and soft, echoing the logo's rounded forms ------ */
  --r-sm: 0.375rem;
  --r-md: 0.75rem;
  --r-lg: 1rem;
  --r-xl: 1.5rem;
  --r-pill: 999px;
  /* Arched mask echoing the roofline and cupped hands of the mark. */
  --r-arch: 14rem 14rem var(--r-lg) var(--r-lg);

  /* --- Shadows: low-contrast and warm-tinted, never harsh -------------- */
  --shadow-sm: 0 1px 2px rgba(18, 33, 47, 0.06),
               0 2px 6px rgba(18, 33, 47, 0.04);
  --shadow-md: 0 2px 4px rgba(18, 33, 47, 0.05),
               0 8px 20px rgba(18, 33, 47, 0.07);
  --shadow-lg: 0 4px 8px rgba(18, 33, 47, 0.05),
               0 18px 44px rgba(18, 33, 47, 0.10);

  /* --- Motion ---------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 520ms;

  /* --- Misc ------------------------------------------------------------ */
  --header-h: 4.5rem;
  --tap-min: 2.75rem;  /* 44px — WCAG 2.2 target size floor */
  --z-header: 100;
  --z-drawer: 200;
  --z-callbar: 150;
}

@media (min-width: 60rem) {
  :root { --header-h: 5.5rem; }
}