/* =========================================================================
   Extra Care — Design Tokens
   "The Anatomy of Care" — clinical precision + human warmth
   ========================================================================= */
:root {
  /* ---- Brand colours (exact, from guidelines) ---- */
  --ink:        #231F20;   /* near-black */
  --ink-2:      #1A1719;   /* dark surface */
  --gray:       #6D6E71;
  --gray-2:     #9A9B9E;
  --gray-3:     #C9CACC;
  --hair:       #E7E9EC;   /* hairline rule */
  --hair-soft:  #EFF1F4;

  --clinics:    #0099D6;   --clinics-deep: #0081C5;
  --lab:        #D38729;   --lab-deep:     #BB5827;
  --ped:        #9D85BE;   --ped-deep:     #7C51A1;
  --scan:       #6FA542;   --scan-deep:    #1B8C45;

  --bg:         #FFFFFF;
  --bg-soft:    #FAFBFC;
  --bg-tint:    #F4F7FA;

  /* ---- Travelling accent (set per-section / per-route via JS or class) ---- */
  --accent:      var(--clinics);
  --accent-deep: var(--clinics-deep);

  /* ---- Type ----
     Brand fonts are Aller (primary) + Avenir LT Std 95 Black (accent).
     Drop Aller-Regular.woff2 / Aller-Bold.woff2 / Avenir-Black.woff2 into /fonts/
     (see fonts/README.txt) and they take over automatically; otherwise the
     close web fallbacks (Hanken Grotesk / Archivo) render. */
  --font-sans: "Aller", "Hanken Grotesk", "Avenir Next", "Nunito Sans", system-ui, sans-serif;
  --font-accent: "Avenir LT Std", "Avenir Next", "Archivo", var(--font-sans);
  --font-ar: "IBM Plex Sans Arabic", "Cairo", var(--font-sans);

  /* fluid type scale */
  --t-eyebrow: 0.78rem;
  --t-body:    clamp(1.05rem, 1rem + 0.25vw, 1.22rem);
  --t-lead:    clamp(1.3rem, 1.1rem + 0.9vw, 1.95rem);
  --t-h3:      clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem);
  --t-h2:      clamp(2.3rem, 1.45rem + 3.4vw, 4.4rem);
  --t-h1:      clamp(3rem, 1.4rem + 6.2vw, 7.2rem);
  --t-display: clamp(3.2rem, 0.8rem + 8vw, 8.4rem);

  /* ---- Spacing / layout ---- */
  --container: 1280px;
  --container-wide: 1480px;
  --gutter: clamp(1.25rem, 4vw, 5rem);
  --section-y: clamp(4.75rem, 7vw, 9rem);

  /* ---- Radii ---- */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;

  /* ---- Depth ---- */
  --shadow-sm: 0 1px 2px rgba(35,31,32,.04), 0 2px 8px rgba(35,31,32,.04);
  --shadow-md: 0 4px 12px rgba(35,31,32,.05), 0 16px 40px rgba(35,31,32,.06);
  --shadow-lg: 0 12px 28px rgba(35,31,32,.08), 0 40px 90px rgba(35,31,32,.10);
  --shadow-accent: 0 18px 50px -18px color-mix(in oklch, var(--accent) 55%, transparent);

  /* ---- Motion ---- */
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-inout: cubic-bezier(.65,.05,.36,1);
  --d-fast: .35s;
  --d-med: .7s;
  --d-slow: 1.1s;

  --nav-h: 76px;
}

/* ---- Brand web fonts (drop files into /fonts/ — see fonts/README.txt) ---- */
@font-face{ font-family:"Aller"; font-style:normal; font-weight:400; font-display:swap;
  src:local("Aller"), url("../fonts/Aller-Regular.woff2") format("woff2"); }
@font-face{ font-family:"Aller"; font-style:normal; font-weight:500; font-display:swap;
  src:local("Aller"), url("../fonts/Aller-Regular.woff2") format("woff2"); }
@font-face{ font-family:"Aller"; font-style:normal; font-weight:700; font-display:swap;
  src:local("Aller Bold"), url("../fonts/Aller-Bold.woff2") format("woff2"); }
@font-face{ font-family:"Avenir LT Std"; font-style:normal; font-weight:800 900; font-display:swap;
  src:local("Avenir LT Std 95 Black"), local("Avenir-Black"), url("../fonts/Avenir-Black.woff2") format("woff2"); }

/* Per-route / per-section accent locks */
[data-accent="clinics"]{ --accent:#0099D6; --accent-deep:#0081C5; }
[data-accent="lab"]    { --accent:#D38729; --accent-deep:#BB5827; }
[data-accent="ped"]    { --accent:#9D85BE; --accent-deep:#7C51A1; }
[data-accent="scan"]   { --accent:#6FA542; --accent-deep:#1B8C45; }
[data-accent="ink"]    { --accent:#0099D6; --accent-deep:#0081C5; }