/* ==========================================================================
   variables.css — Design tokens
   Single source of truth for colors, type, spacing, radius, shadows, motion.
   Pulled from the Five Share brand brief (medical blue + clinical navy).
   ========================================================================== */

:root {
  /* --- Brand colors ------------------------------------------------------ */
  --color-navy: #0B1F33;          /* clinical navy — headings, dark sections */
  --color-navy-deep: #081827;     /* deepest navy — footer, gradient tail    */
  --color-blue: #1F7AE0;          /* primary medical blue — links, buttons   */
  --color-blue-dark: #155FB0;     /* hover / pressed / darker gradient stop  */
  --color-cyan: #23B7D9;          /* secondary accent on dark surfaces       */
  --color-cyan-soft: #7FD3E8;     /* eyebrows / icons on dark surfaces       */
  --color-teal: #12B5C9;          /* premium teal for key CTAs               */

  /* --- Surfaces ---------------------------------------------------------- */
  --color-surface: #FFFFFF;       /* default page background                 */
  --color-surface-alt: #F5F8FA;   /* alternating soft-gray section           */
  --color-surface-well: #EEF6FC;  /* pale-blue image wells inside cards      */

  /* --- Text -------------------------------------------------------------- */
  --color-text: #17212B;          /* body copy on light                      */
  --color-text-heading: #0B1F33;  /* headings on light                       */
  --color-text-secondary: #5B6773;/* supporting paragraphs                   */
  --color-text-muted: #7C8792;    /* eyebrows / captions / meta              */

  /* --- Text on dark surfaces (white with opacity) ------------------------ */
  --color-on-dark: rgba(255, 255, 255, 0.9);
  --color-on-dark-body: rgba(255, 255, 255, 0.75);
  --color-on-dark-muted: rgba(255, 255, 255, 0.6);

  /* --- Borders ----------------------------------------------------------- */
  --color-border: #EAF0F4;        /* card borders on light                   */
  --color-border-soft: #EEF2F5;   /* section dividers                        */
  --color-border-dark: rgba(255, 255, 255, 0.1);

  /* --- Functional -------------------------------------------------------- */
  --color-whatsapp: #25D366;
  --color-success: #34D399;
  --color-focus: var(--color-blue);

  /* --- Gradients --------------------------------------------------------- */
  --gradient-brand: linear-gradient(135deg, var(--color-blue), var(--color-cyan));
  --gradient-brand-strong: linear-gradient(135deg, var(--color-blue-dark), var(--color-blue));
  --gradient-dark: linear-gradient(160deg, var(--color-navy), var(--color-navy-deep));
  --gradient-band: linear-gradient(135deg, var(--color-blue), var(--color-cyan));

  /* --- Typography -------------------------------------------------------- */
  --font-heading: "Manrope", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Fluid type scale */
  --fs-eyebrow: 0.78rem;          /* ~12.5px */
  --fs-caption: 0.72rem;          /* ~11.5px */
  --fs-body-sm: 0.9rem;           /* ~14.5px */
  --fs-body: 1.0625rem;           /* ~17px   */
  --fs-body-lg: 1.125rem;         /* ~18px   */
  --fs-h3: 1.15rem;
  --fs-h2: clamp(1.9rem, 3.2vw, 2.5rem);
  --fs-h1: clamp(2.5rem, 5.2vw, 4.1rem);

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.65;
  --tracking-tight: -0.02em;
  --tracking-eyebrow: 0.05em;

  /* --- Spacing scale (8px base) ----------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 22px;
  --space-6: 26px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 52px;
  --space-10: 64px;
  --section-padding-y: 100px;
  --section-padding-y-sm: 90px;

  /* --- Layout ------------------------------------------------------------ */
  --container-max: 1200px;
  --container-pad: 32px;
  --measure: 560px;               /* readable paragraph width                */

  /* --- Radius ------------------------------------------------------------ */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 18px;
  --radius-xl: 20px;
  --radius-2xl: 22px;
  --radius-3xl: 28px;
  --radius-pill: 999px;

  /* --- Shadows (soft, blue-tinted) -------------------------------------- */
  --shadow-card: 0 1px 2px rgba(11, 31, 51, 0.04);
  --shadow-lift: 0 30px 60px -26px rgba(11, 31, 51, 0.35);
  --shadow-image: 0 30px 60px -28px rgba(11, 31, 51, 0.35);
  --shadow-button: 0 14px 34px -12px rgba(31, 122, 224, 0.7);
  --shadow-button-hover: 0 22px 46px -12px rgba(31, 122, 224, 0.9);
  --shadow-button-sm: 0 8px 22px -8px rgba(31, 122, 224, 0.6);
  --shadow-float: 0 12px 30px -8px rgba(37, 211, 102, 0.6);

  /* --- Motion ------------------------------------------------------------ */
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 0.25s;
  --transition-base: 0.35s;
  --transition-slow: 0.5s;
  --transition-reveal: 0.9s;

  /* --- Z-index scale ----------------------------------------------------- */
  --z-base: 1;
  --z-header: 110;
  --z-float: 115;
  --z-progress: 120;
  --z-menu: 130;
}