/* ============================================================
   J S Hospital - Design Tokens
   Clean clinical / trustworthy. Teal brand accent, locked.
   ============================================================ */

:root {
  /* ---- Color: neutrals ---- */
  --ink:        #0A2540;   /* primary text - deep slate     */
  --ink-soft:   #5B6B82;   /* secondary text                */
  --ink-faint:  #8696AB;   /* tertiary / captions           */
  --bg:         #FFFFFF;   /* page background               */
  --surface:    #F7F9FC;   /* soft section background       */
  --surface-2:  #EEF2F8;   /* deeper tint                   */
  --line:       #E3E9F2;   /* hairline borders              */
  --line-soft:  #EEF2F8;

  /* ---- Color: brand (medical blue) ---- */
  --primary:        #0057FF;
  --primary-700:    #003BB0;
  --primary-600:    #0049D6;
  --primary-300:    #B3CDFF;
  --primary-100:    #E6EEFF;
  --primary-50:     #F2F7FF;

  /* ---- Color: support ---- */
  --accent:     #00C6B8;   /* soft teal - links/secondary   */
  --accent-700: #02A99D;
  --health:     #00C6B8;   /* teal - success/health (brand) */
  --health-100: #E6F9F8;
  --warn:       #E11D48;   /* emergency red - sparingly     */
  --warn-100:   #FCE4EA;
  --gold:       #FFD166;   /* ratings/stars                 */

  /* ---- Color: on-dark (footer / hero overlays) ---- */
  --dark:       #06182C;
  --dark-2:     #08203A;
  --on-dark:    #DBE6F4;
  --on-dark-soft: #9FB0C4;

  /* ---- Gradients ---- */
  --grad-brand:      linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(0,87,255,.08), rgba(0,198,184,.08));
  --grad-dark:       linear-gradient(160deg, #0C2C4D 0%, var(--ink) 55%, var(--dark) 100%);

  /* ---- Typography ---- */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Bricolage Grotesque", var(--font-body);

  /* Type scale (1.25 major third), fluid via clamp where it counts */
  --fs-xs:   0.8125rem;  /* 13px */
  --fs-sm:   0.875rem;   /* 14px */
  --fs-base: 1rem;       /* 16px */
  --fs-md:   1.125rem;   /* 18px */
  --fs-lg:   1.375rem;   /* 22px */
  --fs-xl:   1.75rem;    /* 28px */
  --fs-2xl:  clamp(1.875rem, 1.4rem + 2vw, 2.5rem);   /* 30-40 */
  --fs-3xl:  clamp(2.25rem, 1.6rem + 3vw, 3.25rem);   /* 36-52 */
  --fs-display: clamp(2.6rem, 1.6rem + 4.4vw, 4rem);  /* 42-64 hero */

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

  --tracking-tight: -0.02em;
  --tracking-eyebrow: 0.14em;

  /* ---- Spacing (8px 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;
  --section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  --section-y-sm: clamp(2.5rem, 1.5rem + 4vw, 4rem);

  /* ---- Layout ---- */
  --container: 1200px;
  --container-narrow: 880px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);

  /* ---- Radii (soft system, locked) ---- */
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill: 999px;

  /* ---- Shadows (tinted to ink, never pure black) ---- */
  --sh-xs: 0 1px 2px rgba(10, 37, 64, 0.06);
  --sh-sm: 0 4px 14px rgba(10, 37, 64, 0.07);
  --sh-md: 0 14px 40px rgba(10, 37, 64, 0.10);
  --sh-lg: 0 30px 70px rgba(10, 37, 64, 0.14);
  --sh-primary: 0 18px 50px rgba(0, 87, 255, 0.28);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 0.18s;
  --dur: 0.32s;
  --dur-slow: 0.6s;

  /* ---- Misc ---- */
  --header-h: 76px;
  --z-header: 9999;
  --z-drawer: 10010;
  --z-overlay: 10000;
}