/* ============================================================
   Eglinton Medical Collective — design tokens
   Single source of truth for colour, type, spacing, motion.
   BRIEF §2 (brand) + §4 (motion).
   ============================================================ */

:root {
  /* ---- Brand colour ----
     Client direction (Jun 2026): shift off the green (sat too close to
     St Francis) toward a calmer teal / blue-green + blue-grey, keeping
     gold + white. Deep teal echoes the charcoal-blue of the signage. */
  --pine:        #2C7B86; /* primary accent — calm blue-teal (the single action colour) */
  --forest:      #16383F; /* deep teal — dark sections; echoes the signage charcoal */
  --ink:         #17292F; /* slate near-black — calmer than pure black */
  --bone:        #F5F6F5; /* primary background — soft, light, cool-white */
  --stone:       #B6C2C6; /* secondary surface — cool blue-grey */
  --stone-light: #E6EAEA; /* tints, fields, marquee — light cool grey */
  --oak:         #B5926A; /* warm gold — the warmth in gold + white + blue */
  --chocolate:   #5B5240; /* deep warm taupe — quiet emphasis */
  --slate:       #5E727C; /* blue-grey — signage tie-in, secondary accents */

  /* ---- Semantic aliases ---- */
  --bg:           var(--bone);   /* warm off-white canvas */
  --surface:      var(--stone-light);
  --text:         var(--ink);
  --text-muted:   color-mix(in srgb, var(--ink) 62%, var(--bone));
  --line:         color-mix(in srgb, var(--ink) 12%, transparent);
  --accent:       var(--pine);
  --accent-hover: var(--forest);
  --on-accent:    var(--bone);

  /* ---- Dark section palette ---- */
  --dark-bg:    var(--ink);
  --dark-text:  color-mix(in srgb, var(--bone) 90%, transparent);
  --dark-muted: color-mix(in srgb, var(--bone) 60%, transparent);

  /* ---- Type (BRIEF §2) ---- */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* labels use the body sans (softer than the old DM Mono, per client feedback) */
  --font-mono:    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid type scale (clamp: min, preferred, max) */
  --fs-eyebrow: clamp(0.72rem, 0.68rem + 0.2vw, 0.82rem);
  --fs-body:    clamp(1rem, 0.96rem + 0.25vw, 1.125rem);
  --fs-lead:    clamp(1.15rem, 1.05rem + 0.6vw, 1.5rem);
  --fs-h3:      clamp(1.35rem, 1.1rem + 1.2vw, 2rem);
  --fs-h2:      clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  --fs-h1:      clamp(2.6rem, 1.6rem + 4.6vw, 5.2rem);
  --fs-display: clamp(3rem, 1.8rem + 6vw, 6.5rem);

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.65;

  /* ---- Spacing / layout ---- */
  --maxw:      1200px;
  --maxw-text: 64ch;
  --gutter:    clamp(1.25rem, 0.8rem + 2vw, 3rem);
  --section-y: clamp(2.5rem, 1.6rem + 3.2vw, 4.5rem);
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-12:  3rem;
  --space-16:  4rem;

  --radius-sm: 12px;
  --radius:    18px;
  --radius-lg: 28px;
  --radius-xl: 38px;
  --radius-pill: 999px;

  /* ---- Motion — the single easing (BRIEF §4: no linear, no ease-in-out) ---- */
  --ease:      cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast:  0.28s;
  --dur:       0.6s;
  --dur-slow:  1.1s;

  /* ---- Glass (only on fixed/sticky elements — BRIEF §4) ---- */
  --glass-bg:     color-mix(in srgb, var(--bone) 72%, transparent);
  --glass-border: color-mix(in srgb, var(--ink) 9%, transparent);
  --glass-blur:   blur(14px) saturate(1.4);

  /* ---- Elevation (tinted toward the warm/ink base, not pure black) ---- */
  --shadow-soft: 0 6px 18px -8px rgba(22, 56, 63, 0.22), 0 2px 6px -2px rgba(22, 56, 63, 0.12);
  --shadow-lg:   0 28px 56px -22px rgba(16, 41, 47, 0.34), 0 10px 22px -12px rgba(22, 56, 63, 0.22);
  --shadow-xl:   0 54px 96px -34px rgba(16, 41, 47, 0.46), 0 22px 44px -22px rgba(22, 56, 63, 0.32);
  --shadow-pine: 0 30px 80px -34px rgba(44, 123, 134, 0.5);

  /* ---- Ambient glow + grain (surface depth) ---- */
  --glow-pine: radial-gradient(60% 60% at 50% 40%, color-mix(in srgb, var(--pine) 30%, transparent) 0%, transparent 70%);
  --glow-oak:  radial-gradient(55% 55% at 70% 30%, color-mix(in srgb, var(--oak) 32%, transparent) 0%, transparent 70%);
  --grain-opacity: 0.05;

  /* ---- z-index scale ---- */
  --z-grain: 1;
  --z-base: 1;
  --z-raised: 10;
  --z-nav: 1000;
  --z-menu: 1100;
}