/* ============================================================
   JS Hospital — Design Tokens
   Premium luxury healthcare design system
   ============================================================ */

/* ---- Local fonts ---- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/Inter-400.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/Inter-500.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/Inter-600.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/Inter-700.woff2) format('woff2');}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/PlusJakartaSans-500.woff2) format('woff2');}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/PlusJakartaSans-600.woff2) format('woff2');}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/PlusJakartaSans-700.woff2) format('woff2');}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/PlusJakartaSans-800.woff2) format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/SpaceGrotesk-500.woff2) format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/SpaceGrotesk-600.woff2) format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/SpaceGrotesk-700.woff2) format('woff2');}

:root{
  /* ---- Brand palette ---- */
  --white:#ffffff;
  --blue:#0057ff;        /* medical blue */
  --blue-600:#0049d6;
  --blue-700:#003bb0;
  --teal:#00c6b8;        /* soft teal */
  --teal-600:#02a99d;
  --navy:#0a2540;        /* deep navy */
  --navy-700:#08203a;
  --navy-800:#06182c;
  --gold:#ffd166;        /* accent gold */
  --gray-50:#f7f9fc;     /* light gray bg */
  --gray-100:#eef2f8;
  --gray-200:#e3e9f2;
  --gray-300:#cdd6e4;
  --ink:#0a2540;         /* primary text */
  --muted:#5b6b82;       /* secondary text */
  --muted-2:#8696ab;

  /* ---- Gradients ---- */
  --grad-brand:linear-gradient(135deg,var(--blue) 0%,var(--teal) 100%);
  --grad-brand-soft:linear-gradient(135deg,rgba(0,87,255,.08),rgba(0,198,184,.08));
  --grad-navy:linear-gradient(160deg,#0c2c4d 0%,#0a2540 55%,#06182c 100%);
  --grad-sheen:linear-gradient(120deg,rgba(255,255,255,.65),rgba(255,255,255,0) 60%);

  /* ---- Typography ---- */
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  --font-mono:'Space Grotesk','Inter',sans-serif;

  /* fluid type scale */
  --fs-xs:.78rem;
  --fs-sm:.875rem;
  --fs-base:1rem;
  --fs-md:1.0625rem;
  --fs-lg:clamp(1.125rem,1.05rem + .4vw,1.3rem);
  --fs-xl:clamp(1.4rem,1.2rem + .9vw,1.85rem);
  --fs-2xl:clamp(1.9rem,1.5rem + 1.8vw,2.75rem);
  --fs-3xl:clamp(2.4rem,1.8rem + 3vw,4rem);
  --fs-hero:clamp(2.8rem,2rem + 4.4vw,5.5rem);

  /* ---- Spacing ---- */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem; --sp-10:8rem;
  --section-y:clamp(4rem,3rem + 6vw,8rem);

  /* ---- Radii ---- */
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-2xl:36px; --r-pill:999px;

  /* ---- Shadows ---- */
  --sh-xs:0 1px 2px rgba(10,37,64,.06);
  --sh-sm:0 4px 14px rgba(10,37,64,.07);
  --sh-md:0 14px 40px rgba(10,37,64,.10);
  --sh-lg:0 30px 70px rgba(10,37,64,.14);
  --sh-blue:0 18px 50px rgba(0,87,255,.28);
  --sh-teal:0 18px 50px rgba(0,198,184,.26);
  --ring:0 0 0 4px rgba(0,87,255,.16);

  /* ---- Layout ---- */
  --container:1240px;
  --container-narrow:920px;
  --header-h:80px;

  /* ---- Glass ---- */
  --glass-bg:rgba(255,255,255,.62);
  --glass-brd:rgba(255,255,255,.7);
  --glass-blur:saturate(160%) blur(18px);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}