/* ===================================================================
   MADINA PHARMA LINKS — DESIGN TOKENS
   "Liquid Glass" system inspired by visionOS, re-grounded in the
   Madina logo palette (cobalt blue / leaf green / signal red) instead
   of the generic purple-on-black look most "glass" sites default to.
   =================================================================== */

:root {
  /* ---- Brand colors (pulled from the Madina logo + box art) ---- */
  --brand-blue:        #2452E8;
  --brand-blue-light:  #5B8DEF;
  --brand-green:       #1FA572;
  --brand-green-light: #4FD49B;
  --brand-red:         #E63946;

  /* ---- Canvas: deep clinical navy, not pure black ---- */
  --bg-base:    #060B16;
  --bg-base-2:  #0A1326;
  --bg-base-3:  #0E1B33;

  /* ---- Glass surfaces ---- */
  --glass-fill:        rgba(255, 255, 255, 0.06);
  --glass-fill-strong: rgba(255, 255, 255, 0.12);
  --glass-border:      rgba(255, 255, 255, 0.16);
  --glass-border-soft: rgba(255, 255, 255, 0.08);
  --glass-highlight:   rgba(255, 255, 255, 0.35);
  --glass-blur:        24px;
  --glass-blur-lg:     40px;
   --bg-deep:#021019;
    --bg-mid:#063142;
    --glass-tint:rgba(255,255,255,0.08);
    --ink:#ffffff;
  /* ---- Text ---- */
  --text-primary:   #F4F7FC;
  --text-secondary: rgba(244, 247, 252, 0.68);
  --text-muted:     rgba(244, 247, 252, 0.44);
  --text-on-glass:  #FFFFFF;

  /* ---- Type families ----
     Display: Sora      — geometric, technical, confident
     Body:    Inter      — clinical clarity, highly legible
     Data:    JetBrains Mono — for spec sheets / batch data,
              a nod to the printed lettering on packaging
  */
  --font-display: "Sora", "Segoe UI", sans-serif;
  --font-body:    "Inter", "Segoe UI", sans-serif;
  --font-data:    "JetBrains Mono", "Courier New", monospace;

  /* ---- Type scale ---- */
  --fs-display-xl: clamp(2.6rem, 6vw, 5.2rem);
  --fs-display-l:  clamp(2rem, 4vw, 3.4rem);
  --fs-display-m:  clamp(1.5rem, 2.4vw, 2.1rem);
  --fs-body-l:      1.15rem;
  --fs-body:        1rem;
  --fs-small:       0.875rem;
  --fs-tiny:        0.75rem;

  /* ---- Spacing scale (8px base) ---- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4.5rem;
  --sp-7: 7rem;

  /* ---- Radii — soft, continuous, "liquid" curvature ---- */
  --radius-s:  14px;
  --radius-m:  22px;
  --radius-l:  32px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease-glass: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.25s;
  --dur-med:  0.6s;
  --dur-slow: 1.4s;

  /* ---- Layout ---- */
  --container-w: 1180px;
  --nav-h: 76px;

  --red:#FF3B47;
    --blue:#3A8DFF;
    --green:#2BD673;
    --bg:#050506;
    --text:#F4F4F5;
    --muted:#8A8A90;
}