/*
  Neurogen design tokens.
  Source of truth for colors/type/spacing — every component and page reads from here.
  Palette: Neurogen logo navy as primary, Invitro teal borrowed as the action/accent color.
*/

:root {
  /* Brand colors */
  --color-navy: #203942;        /* primary — from logo, headings, header bg */
  --color-navy-dark: #152a31;   /* hover/active states on navy */
  --color-teal: #00a9c3;        /* accent — CTAs, links, borrowed from Invitro */
  --color-teal-dark: #00839a;   /* CTA hover */
  --color-text: #4e5869;        /* body copy gray, from Invitro */
  --color-text-light: #69787f;  /* secondary text, from logo subtitle gray */
  --color-bg: #ffffff;
  --color-bg-soft: #f7f9fa;     /* section backgrounds, alternating stripes */
  --color-border: #e3e7e9;

  /* Status colors for the floating contact widget icons — circle backgrounds.
     Icon glyphs are forced white in floating-widget.css so they never match
     their own circle color (was invisible before: same hex on both). */
  --color-whatsapp: #25d366;
  --color-viber: #7360f2;
  --color-messenger: #0866ff;
  --color-facebook: #0866ff;

  /* Typography */
  --font-base: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-base: 17px;       /* larger base than typical sites — older-skewing audience */
  --font-size-h1: clamp(1.75rem, 3vw, 2.5rem);
  --font-size-h2: clamp(1.35rem, 2.4vw, 2rem);
  --font-size-h3: 1.25rem;
  --font-size-body: 1.0625rem;
  --font-size-small: 0.9375rem;
  --line-height-body: 1.6;

  /* Spacing scale */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;

  /* Layout */
  --container-max: 1180px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-card: 0 4px 20px rgba(32, 57, 66, 0.08);
  --shadow-widget: 0 6px 16px rgba(0, 0, 0, 0.18);
}