/* ==========================================================================
   Swasthy Wellcare — design tokens
   The ONLY file in the project permitted to contain a colour literal.
   Every other stylesheet consumes these custom properties.
   See docs/DESIGN-SYSTEM.md.
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------
     Taken from the CLIENT'S logo (sampled from the artwork itself):
     royal-blue "Swasthy" #0052BA and teal "Wellcare" #00A4BC.

     The blue is strong enough for text (7.2:1 on white) so it is the
     primary. The teal measures only 3.0:1 on white, so it is reserved for
     the mark, gradients, large display text and dark grounds — where it is
     excellent (5.9:1 on the brand navy). --color-accent-strong is its
     accessible counterpart for body-size text.                            */
  --color-primary: #0052ba;         /* logo royal blue   — 7.2:1 on white     */
  --color-primary-hover: #003e8f;
  --color-primary-soft: #e8f0fb;
  --color-secondary: #00a4bc;       /* logo teal — large text / UI            */
  --color-accent: #00a4bc;          /* logo teal — decorative & dark grounds  */
  --color-accent-strong: #00758a;   /* accessible teal for text — 5.4:1       */
  --color-accent-soft: #e2f5f8;
  --color-ink: #08183a;             /* deep navy from the wordmark shadows    */

  /* The logo's own two colours, blended for marks, rules and hero accents. */
  --gradient-brand: linear-gradient(135deg, #00a4bc 0%, #0374b8 48%, #0052ba 100%);

  /* --- Status ----------------------------------------------------------- */
  --color-success: #1f7a4d;
  --color-success-soft: #e6f4ec;
  --color-warning: #b45309;
  --color-warning-soft: #fdf3e3;
  --color-danger: #b42318;
  --color-danger-soft: #fdecea;
  --color-info: #0052ba;
  --color-info-soft: #e8f0fb;

  /* --- Surfaces --------------------------------------------------------- */
  --color-background: #f6f9fc;      /* cool off-white, never pure white */
  --color-surface: #ffffff;
  --color-surface-muted: #edf2f8;
  --color-surface-invert: #08183a;

  /* --- Text ------------------------------------------------------------- */
  --color-text: #0f1b2d;
  --color-text-muted: #53637a;
  --color-text-invert: #f2f6fa;

  /* --- Lines & focus ---------------------------------------------------- */
  /* Borders are decorative rather than informational, so WCAG's 3:1 for UI
     components does not apply — but a border under about 1.3:1 against the
     page background is effectively invisible, so that is the floor the
     contrast gate enforces. */
  --color-border: #cdd9e5;
  --color-border-strong: #aabccd;
  --color-focus: #0052ba;

  /* --- Neutral scale (very slightly blue-cast to sit under the brand) --- */
  --neutral-50: #f6f9fc;
  --neutral-100: #edf2f8;
  --neutral-200: #dce5ee;
  --neutral-300: #cdd9e5;
  --neutral-400: #94a6b8;
  --neutral-500: #74869a;
  --neutral-600: #53637a;
  --neutral-700: #3b4a5f;
  --neutral-800: #1d2a3d;
  --neutral-900: #0f1b2d;

  /* --- Overlays --------------------------------------------------------- */
  --overlay-scrim: rgb(8 24 58 / 0.62);    /* breadcrumb banner readability */
  --overlay-modal: rgb(8 24 58 / 0.48);

  /* --- Radii ------------------------------------------------------------ */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* --- Elevation -------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgb(15 27 45 / 0.06);
  --shadow-md: 0 4px 12px rgb(15 27 45 / 0.08);
  --shadow-lg: 0 12px 32px rgb(15 27 45 / 0.10);
  --shadow-xl: 0 24px 64px rgb(15 27 45 / 0.12);

  /* --- Spacing ---------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 112px;

  /* --- Layout ----------------------------------------------------------- */
  --gutter: clamp(16px, 4vw, 40px);
  --container-max: 1320px;
  --container: min(100% - (2 * var(--gutter)), var(--container-max));
  --stack: clamp(18px, 2.2vw, 32px);      /* sibling card gap — never 0 */
  --section-y: clamp(56px, 7vw, 112px);
  --measure: 68ch;

  /* --- Typography ------------------------------------------------------- */
  --font-heading: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-display: clamp(2.5rem, 1.6rem + 4.2vw, 4.5rem);
  --fs-h1: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  --fs-h2: clamp(1.625rem, 1.35rem + 1.3vw, 2.25rem);
  --fs-h3: clamp(1.3rem, 1.18rem + 0.6vw, 1.625rem);
  --fs-h4: clamp(1.125rem, 1.07rem + 0.27vw, 1.25rem);
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-small: 0.9375rem;
  --fs-caption: 0.875rem;           /* absolute floor — nothing smaller ships */

  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-subheading: 1.3;
  --lh-body: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;

  /* --- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition-fast: 140ms var(--ease);
  --transition-normal: 240ms var(--ease);
  --transition-slow: 400ms var(--ease);

  /* --- Layering --------------------------------------------------------- */
  --z-base: 0;
  --z-sticky: 100;
  --z-header: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* Decorative motion is opt-out at the token level so every component that
   consumes --transition-* is covered without needing its own media query. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 60ms linear;
    --transition-normal: 60ms linear;
    --transition-slow: 60ms linear;
  }
}