/* Caringood design tokens — the single source for brand values.
   Source: brand_assets/Caringood_Brand_Guidelines_Pro.png + the approved homepage.
   Colors are RGB channels so Tailwind opacity modifiers (bg-mist/80) keep working.
   Tailwind utilities read these via tailwind.config.js. */

:root {
  /* Brand palette */
  --color-ocean: 24 86 107;       /* #18566B Deep Ocean — primary */
  --color-teal: 43 126 134;       /* #2B7E86 Care Teal — secondary */
  --color-aqua: 83 205 198;       /* #53CDC6 Fresh Aqua — accent */
  --color-mist: 232 245 244;      /* #E8F5F4 Soft Mist — background */
  --color-cloud: 247 251 251;     /* #F7FBFB Cloud — surface */
  --color-white: 255 255 255;     /* #FFFFFF White — base */

  /* Derived from the palette (not new brand colors) */
  --color-ink: 18 63 79;          /* #123F4F body/heading text */
  --color-muted: 85 112 121;      /* #557079 secondary text */
  --color-ocean-deep: 19 72 88;   /* #134858 primary button hover */
  --color-footer: 15 61 76;       /* #0F3D4C footer background */
  --color-backdrop: 223 239 236;  /* #DFEFEC hero photo backdrop (matches hero-client.jpg) */

  /* Type */
  --font-display: 'Manrope', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Radii */
  --radius-sm: 1rem;      /* small cards, badges */
  --radius-md: 1.5rem;    /* tiles, step cards, panel images */
  --radius-lg: 1.75rem;   /* feature photos */
  --radius-xl: 2rem;      /* large panels, hero photo */

  /* Shadows (layered, ink-tinted) */
  --shadow-soft: 0 1px 2px rgba(18, 63, 79, .05), 0 8px 24px -12px rgba(18, 63, 79, .18);
  --shadow-lift: 0 2px 4px rgba(18, 63, 79, .06), 0 24px 48px -20px rgba(18, 63, 79, .32);

  /* Layout */
  --container-width: 72rem;
  --header-height: 72px;
  --space-section: 5rem;      /* py-20 */
  --space-section-lg: 7rem;   /* lg:py-28 */
  --space-content: 3rem;      /* gap between heading block and content */

  /* Motion (transform/opacity only) */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --transition-fast: .2s;
  --transition-base: .25s;
  --transition-slow: .35s;

  /* Focus */
  --focus-ring: 3px solid rgb(var(--color-aqua));
}