/* ==========================================================================
   ADVANCED PHYSIO HUB — DESIGN TOKENS
   Palette sampled directly from the brand mark (logo photograph).
   Signature concept: the goniometer / range-of-motion arc — physiotherapy's
   own measuring instrument — used as the site's recurring visual motif.
   ========================================================================== */

:root {

  /* ---- Brand palette (named, sampled from logo) ------------------------ */
  --ink-navy:        #0B2647;   /* deepest navy — footer, dark sections, headline ink */
  --brand-navy:      #154379;   /* primary brand blue — core UI, header, primary buttons */
  --brand-navy-2:    #1D5494;   /* lighter navy — hovers, gradients */
  --signal-blue:     #2C6CB0;   /* bright accent blue lifted from the mark's highlight */
  --gold:            #C69A46;   /* primary accent — CTAs, the arc, key emphasis */
  --gold-deep:       #96702B;   /* gold shadow / gradient end / hover */
  --gold-light:      #E4C878;   /* gold highlight / gradient start */

  /* ---- Neutrals ---------------------------------------------------------*/
  --white:           #FFFFFF;
  --mist:            #F4F6F9;   /* cool section background */
  --mist-deep:       #E9EDF3;
  --ink:             #101B2D;   /* body text */
  --ink-soft:        #3B4759;   /* secondary text */
  --gray-500:        #5B6472;
  --gray-300:        #B9C0CB;
  --gray-200:        #DDE2E9;
  --gray-100:        #EEF1F4;
  --border-soft:     rgba(11, 38, 71, 0.09);
  --border-strong:   rgba(11, 38, 71, 0.16);

  /* ---- Gradients ---------------------------------------------------------*/
  --gradient-gold:   linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  --gradient-navy:   linear-gradient(160deg, var(--brand-navy-2) 0%, var(--brand-navy) 45%, var(--ink-navy) 100%);
  --gradient-mist:   linear-gradient(180deg, var(--white) 0%, var(--mist) 100%);

  /* ---- Typography --------------------------------------------------------*/
  --font-display:   'Bricolage Grotesque', 'Segoe UI', sans-serif;
  --font-body:      'Inter', 'Segoe UI', sans-serif;
  --font-mono:      'IBM Plex Mono', 'Courier New', monospace;

  /* Fluid type scale */
  --fs-xs:    clamp(0.7rem,   0.68rem + 0.12vw, 0.78rem);
  --fs-sm:    clamp(0.85rem,  0.82rem + 0.16vw, 0.95rem);
  --fs-base:  clamp(1rem,     0.97rem + 0.18vw, 1.05rem);
  --fs-md:    clamp(1.1rem,   1.05rem + 0.3vw,  1.3rem);
  --fs-lg:    clamp(1.35rem,  1.25rem + 0.55vw, 1.7rem);
  --fs-xl:    clamp(1.7rem,   1.5rem + 1vw,     2.3rem);
  --fs-2xl:   clamp(2.1rem,   1.75rem + 1.8vw,  3.1rem);
  --fs-3xl:   clamp(2.6rem,   2rem + 3vw,       4.4rem);
  --fs-4xl:   clamp(3rem,     2.2rem + 4.2vw,   5.6rem);

  --lh-tight:  1.05;
  --lh-snug:   1.25;
  --lh-normal: 1.6;
  --ls-tight:  -0.03em;
  --ls-wide:   0.14em;

  /* ---- Spacing (8px rhythm) ----------------------------------------------*/
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.25rem;
  --space-xl:  3.25rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6.5rem;
  --section-pad: clamp(4.25rem, 3.2rem + 4.5vw, 7.5rem);

  /* ---- Layout ------------------------------------------------------------*/
  --container-max: 1288px;
  --container-narrow: 860px;
  --container-pad: clamp(1.25rem, 1rem + 3vw, 3rem);

  /* ---- Radius ------------------------------------------------------------*/
  --radius-sm:   10px;
  --radius-md:   18px;
  --radius-lg:   28px;
  --radius-full: 999px;

  /* ---- Shadow ------------------------------------------------------------*/
  --shadow-sm: 0 2px 10px rgba(11, 38, 71, 0.06);
  --shadow-md: 0 10px 30px rgba(11, 38, 71, 0.10);
  --shadow-lg: 0 24px 60px rgba(11, 38, 71, 0.16);
  --shadow-gold: 0 14px 34px rgba(150, 112, 43, 0.32);

  /* ---- Motion ------------------------------------------------------------*/
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  0.25s;
  --dur-base:  0.5s;
  --dur-slow:  0.9s;

  /* ---- Z-index scale -------------------------------------------------------*/
  --z-header: 100;
  --z-mobile-menu: 200;
  --z-fab: 90;
}