/* ============================================================
   Family & Lifestyle Medicine — Design tokens: colour, type, shape, depth, layout
   Part 01 of 11. The cascade depends on load order:
   these files must stay linked in numeric sequence (see any page <head>).
   ============================================================ */

/* ============================================================
   Family & Lifestyle Medicine — Lansing
   Design system: elegant & warm
   ============================================================ */

:root {
  /* Brand */
  --crimson:        #9B1B2F;
  --crimson-deep:   #7A1424;
  --crimson-soft:   #C4394D;
  --slate:          #3E5C6B;
  --slate-deep:     #294451;
  --gold:           #C89B3C;

  /* Neutrals */
  --ivory:          #FAF7F2;
  --cream:          #F4EEE6;
  --white:          #FFFFFF;
  --ink:            #241F20;
  --body:           #4A4547;
  --muted:          #77706F;
  --line:           rgba(62, 92, 107, .16);

  /* Type */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Shape & depth */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 34px;
  /* Signature shape: one deeply arched corner, echoing the hero photo's dome
     and the curve of the stethoscope in the logo. Used on statement blocks. */
  --r-arch: clamp(56px, 6vw, 84px);
  --shadow-sm: 0 2px 10px rgba(41, 68, 81, .06);
  --shadow-md: 0 12px 30px -12px rgba(41, 68, 81, .18);
  --shadow-lg: 0 30px 60px -24px rgba(41, 68, 81, .28);
  --shadow-crimson: 0 16px 34px -14px rgba(155, 27, 47, .5);

  /* Layout */
  --container: 1280px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 9vw, 8rem);
  /* One gutter for every card grid, so the home page's four grids stay in step
     with each other. Tight on purpose: the services grid is a bento that reads
     as a single subdivided panel, and wide gaps break that read. */
  --gap-cards: clamp(.75rem, 1.5vw, 1.15rem);
  /* How far a card row rides up across the banner edge above it. Shared by the
     banner's reserved bottom padding and the row's negative margin, so the two
     can never drift apart. */
  --card-lift: clamp(2.5rem, 6vw, 5.5rem);
  /* Height of the mobile bottom nav, excluding the safe-area inset. Three
     things measure off it — the bar, the body padding that keeps the footer
     clear of it, and the sheet that rests on its top edge — so it lives here
     rather than being written out three times. */
  --tabbar-h: 62px;

  /* Subtle gradients. Each is a small tonal step in a single hue — no colour
     shift, no visible banding — so a surface reads as lit rather than as a flat
     fill. Kept as tokens so the whole set can be tuned or flattened at once. */
  --grad-crimson: linear-gradient(165deg, #A81F35 0%, var(--crimson) 55%, var(--crimson-deep) 100%);
  --grad-crimson-deep: linear-gradient(165deg, var(--crimson) 0%, var(--crimson-deep) 60%, #6B1120 100%);
  --grad-surface: linear-gradient(180deg, #FFFFFF 0%, #FCFAF6 100%);
  --grad-surface-hover: linear-gradient(180deg, #FFFFFF 0%, #F8F3EC 100%);
  --grad-slate: linear-gradient(168deg, #33525F 0%, var(--slate-deep) 58%, #223A45 100%);

  --ease: cubic-bezier(.22, .61, .36, 1);
}