/* ==========================================================================
   HomePilot Design Tokens
   Breakpoints (used directly in media queries, documented here for reference):
   --bp-sm: 640px   --bp-md: 768px   --bp-lg: 960px   --bp-xl: 1200px
   ========================================================================== */

:root {
  /* ---- Color: core ramp ---- */
  --ink-900: #0B2545;       /* primary text, headlines, dark surfaces */
  --ink-700: #16385A;       /* secondary navy, dark surface variant */
  --ink-500: #3A5878;       /* muted navy, used sparingly */

  --paper: #FFFFFF;
  --cloud-50: #F6F8F9;      /* section background */
  --cloud-100: #EEF1F3;     /* card / input background on light sections */
  --mist-200: #E1E7EB;      /* borders, dividers */
  --mist-300: #CBD4DA;      /* stronger borders, disabled states */

  --teal-700: #0B6B74;      /* primary action color */
  --teal-800: #084F56;      /* primary action hover/active */
  --teal-100: #E3F2F1;      /* light accent fill */
  --teal-050: #F2F9F8;

  --gold-500: #B8902A;      /* rare trust/advisor accent */
  --gold-100: #FBF1D8;

  --danger-600: #B3261E;
  --danger-100: #FBEAE9;

  /* ---- Color: text on dark ---- */
  --on-dark-primary: #FFFFFF;
  --on-dark-secondary: #C3D2DD;
  --on-dark-muted: #8FA3B5;

  /* ---- Color: text on light ---- */
  --text-primary: var(--ink-900);
  --text-secondary: #4C5E70;
  --text-muted: #768A99;

  /* ---- Typography ---- */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-h1: clamp(2.25rem, 5.2vw + 1rem, 3.75rem);
  --fs-h2: clamp(1.75rem, 2.6vw + 1rem, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.2vw + 1rem, 1.5rem);
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.75rem;

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

  /* ---- Spacing scale (4pt base) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  --section-pad-y: clamp(3.5rem, 8vw, 7rem);
  --container-w: 1180px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* ---- Elevation (flat, restrained) ---- */
  --shadow-sm: 0 1px 2px rgba(11, 37, 69, 0.06);
  --shadow-md: 0 8px 24px -8px rgba(11, 37, 69, 0.16);
  --shadow-lg: 0 20px 48px -16px rgba(11, 37, 69, 0.22);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;

  /* ---- Focus ---- */
  --focus-ring: 0 0 0 3px rgba(11, 107, 116, 0.35);
}