/* Design tokens for My Choice Adult Day Center.
   Sourced from the logo. Structure-led palette: navy + slate carry authority;
   pastels are decoration only (never body text, never large flat fields). */

:root {
  /* --- Structural (authority) --- */
  --navy: #163d5a;
  --navy-700: #0f2c42;
  --navy-900: #0a2030;
  --slate: #707091;
  --slate-700: #585877;
  --slate-300: #b6b6c8;

  /* --- Text --- */
  --ink: #15293c;          /* body text: deep navy, ~10:1 on white */
  --ink-muted: #4d5a68;    /* muted captions, passes AA on white */
  --ink-on-navy: #eef3f8;  /* body text on navy bands */
  --ink-on-navy-muted: #b9cbdb;

  /* --- Surfaces (the dominant 60%) --- */
  --bg: #fcfcfd;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --band-sage: #eef5f0;
  --band-sky: #eef3fa;
  --band-warm: #fbf6ec;    /* faint sun tint, used once, sparingly */
  --band-navy: #163d5a;

  /* --- Pastel accents (decoration only) --- */
  --sage: #bddac8;
  --sage-deep: #6fae8a;
  --rose: #edaeae;
  --rose-deep: #c97b7b;
  --sky: #9dbbe3;
  --steel: #729bba;
  --sun: #f9dd8c;
  --sun-bright: #fff873;
  --amber: #e8a33d;        /* deepened sun for small UI that needs contrast */

  /* --- Borders / lines --- */
  --border: #e4e7ec;
  --border-strong: #d2d8e0;
  --border-navy: rgba(22, 61, 90, 0.14);

  /* --- Typography --- */
  --font-display: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-display: clamp(2.4rem, 1.4rem + 4.2vw, 3.75rem);
  --fs-h1: clamp(2.1rem, 1.4rem + 3vw, 3rem);
  --fs-h2: clamp(1.7rem, 1.25rem + 2vw, 2.4rem);
  --fs-h3: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
  --fs-lead: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --fs-body: 1.125rem;     /* 18px base for an older audience */
  --fs-small: 0.95rem;
  --fs-tiny: 0.82rem;

  --lh-tight: 1.08;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  /* --- Spacing / rhythm --- */
  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 6.5rem);
  --container: 1140px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
  --measure: 66ch;

  /* --- Radii --- */
  --radius-sm: 0.5rem;
  --radius: 0.875rem;
  --radius-lg: 1.4rem;
  --radius-xl: 2rem;
  --radius-pill: 999px;

  /* --- Shadows (navy-tinted) --- */
  --shadow-sm: 0 1px 2px rgba(15, 44, 66, 0.06), 0 1px 3px rgba(15, 44, 66, 0.05);
  --shadow: 0 4px 14px rgba(15, 44, 66, 0.08), 0 2px 6px rgba(15, 44, 66, 0.05);
  --shadow-lg: 0 18px 40px rgba(15, 44, 66, 0.13), 0 6px 14px rgba(15, 44, 66, 0.07);
  --shadow-navy: 0 16px 36px rgba(10, 32, 48, 0.28);

  /* --- Motion --- */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 150ms;
  --t-base: 240ms;
  --t-slow: 480ms;

  /* --- Z-index scale --- */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;
}