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

:root {
  /* ---- Color: neutrals ---- */
  --ink:        #0F1F2E;   /* primary text - deep slate     */
  --ink-soft:   #475569;   /* secondary text                */
  --ink-faint:  #5A6A78;   /* tertiary / captions           */
  --bg:         #FFFFFF;   /* page background               */
  --surface:    #F4F8FA;   /* soft section background       */
  --surface-2:  #EAF2F5;   /* deeper tint                   */
  --line:       #E2EBF0;   /* hairline borders              */
  --line-soft:  #EEF3F6;

  /* ---- Color: brand (teal) ---- */
  --primary:        #0E7C86;
  --primary-700:    #0A5E66;
  --primary-600:    #0C6B74;
  --primary-300:    #6FBEC4;
  --primary-100:    #DCEEF0;
  --primary-50:     #EFF8F9;

  /* ---- Color: support ---- */
  --accent:     #1A8FE3;   /* clear blue - links/secondary  */
  --accent-700: #1370B4;
  --health:     #10B981;   /* fresh green - success/health  */
  --health-100: #D9F5EA;
  --warn:       #E11D48;   /* emergency red - sparingly     */
  --warn-100:   #FCE4EA;
  --gold:       #E0A82E;   /* ratings/stars                 */

  /* ---- Color: on-dark (footer / hero overlays) ---- */
  --dark:       #0B1A24;
  --dark-2:     #102634;
  --on-dark:    #EAF2F5;
  --on-dark-soft: #9DB3BF;

  /* ---- Typography ---- */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Plus Jakarta Sans", 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(15, 31, 46, 0.06);
  --sh-sm: 0 2px 8px rgba(15, 31, 46, 0.06);
  --sh-md: 0 8px 30px rgba(15, 31, 46, 0.07);
  --sh-lg: 0 18px 50px rgba(15, 31, 46, 0.10);
  --sh-primary: 0 12px 30px rgba(14, 124, 134, 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: 100;
  --z-drawer: 120;
  --z-overlay: 110;
}