/* ==========================================================================
   TOKENS — Nibiru Medical Center v4
   "Warm-neutral premium" — warm stone canvas, cool clinical accents.
   The warmth lives ONLY in the neutral ground; the blue accent keeps the
   page premium-clinical and aligned with the established brand palette.
   ========================================================================== */
:root {
  /* --- Neutrals (warm ground, cooled slightly to harmonise with cool photos) */
  --stone:       #ECE8E1;   /* page canvas */
  --stone-deep:  #E3DDD3;   /* alternating band */
  --surface:     #F7F5F0;   /* raised cards */
  --white:       #FFFFFF;

  /* --- Ink (cool charcoal, biased toward the blue accent) */
  --ink:         #172631;
  --ink-soft:    #455663;
  --ink-mute:    #6B7983;

  /* --- Clinical accents */
  --blue:        #1C5A97;   /* primary */
  --blue-deep:   #164A7E;
  --teal:        var(--blue);      /* compatibility alias */
  --teal-deep:   var(--blue-deep);
  --teal-bright: #6EA8E0;          /* accessible blue accent on dark grounds */
  --champagne:   #B89B6E;   /* metallic hairline — used sparingly */

  /* --- Dark ground */
  --night:       #122334;   /* cool near-black blue */
  --night-2:     #193148;

  /* --- Lines & signature */
  --line:        rgba(23, 38, 49, .13);
  --line-strong: rgba(23, 38, 49, .22);
  --line-dark:   rgba(255, 255, 255, .14);
  --signature:   linear-gradient(135deg, #1C5A97 0%, #164A7E 100%);
  --glow-teal:   radial-gradient(60% 100% at 82% 18%, rgba(78,145,207,.24), transparent 62%);

  /* --- Typography */
  --font-display: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif:   "Newsreader", Georgia, "Times New Roman", serif;

  --fs-hero:    clamp(2.9rem, 5.2vw + .4rem, 5.1rem);
  --fs-h2:      clamp(2rem, 3.2vw, 3.05rem);
  --fs-h3:      clamp(1.24rem, 1.5vw, 1.5rem);
  --fs-lead:    16px;
  --fs-body:    16px;
  --fs-small:   16px;
  --fs-eyebrow: 16px;

  /* --- Space / radius / elevation */
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   22px;
  --radius-xl:   30px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(18,35,52,.05), 0 4px 10px rgba(18,35,52,.05);
  --shadow-md: 0 10px 24px rgba(18,35,52,.10);
  --shadow-lg: 0 24px 50px rgba(18,35,52,.16);

  /* Lateral gutter is HARD-CAPPED at 50px per client direction (no dead
     centered column — content runs edge to edge). */
  --edge:      clamp(20px, 4vw, 50px);
  --gutter:    22px;
  --section-y: 3rem;
  --measure:   66ch;   /* readable text width, applied to prose only */

    --fs-content: 16px;
  --padding-block: 3rem;
}


@media(max-width:768px){
  :root{
    --padding-block: 2.5rem;
    --section-y: 2.5rem;
      --fs-eyebrow: 13px;
  }
}

/* =========================================
   Custom Scrollbar
========================================= */

/* Chrome, Edge, Safari */
::-webkit-scrollbar{
    width:12px;
    height:12px;
}

::-webkit-scrollbar-track{
    background:var(--stone);
}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
        180deg,
        var(--blue),
        var(--blue-deep)
    );

    border:3px solid var(--stone);
    border-radius:999px;

    transition:.3s;
}

::-webkit-scrollbar-thumb:hover{

    background:linear-gradient(
        180deg,
        #2B6FB5,
        var(--blue)
    );

}

::-webkit-scrollbar-corner{
    background:var(--stone);
}

/* Firefox */
html{

    scrollbar-width:thin;
    scrollbar-color:var(--blue) white;

}