/* ════════════════════════════════════════════════════════════════
   FIT ESSENTIALS · DESIGN TOKENS
   Single source of truth for the child theme.
   Enqueue ONCE; every component reads from these variables.
   Change a value here → it updates everywhere. Never hard-code a hex
   in a template, block, or Elementor widget. Use var(--fe-*) instead.
   ════════════════════════════════════════════════════════════════ */
:root{
  /* ── Brand (from logo) ── */
  --fe-rose:#9E4F56;        /* "fit" — primary action + brand */
  --fe-rose-strong:#824147; /* hover, links on light */
  --fe-rose-deep:#683439;   /* body links (AAA) */
  --fe-rose-soft:#F0DEE0;   /* tint fills */
  --fe-rose-tint:#F8F1F2;   /* soft section background */
  --fe-rose-warm:#C9727A;   /* DECORATIVE accent — gradients/tints only, never text */

  --fe-sage:#7A9E8F;        /* "essentials" — support */
  --fe-sage-strong:#51685E; /* sage text (AA) */
  --fe-sage-anchor:#293631; /* dark sections: nav strip, footer, bands */
  --fe-sage-soft:#E2EDE8;   /* alt section tint */

  /* ── Warm neutral foundation ── */
  --fe-cream:#FAF7F4;       /* page background */
  --fe-cream-deep:#F2ECE6;  /* alternating sections */
  --fe-white:#FFFFFF;       /* cards, surfaces */
  --fe-ink:#2A2420;         /* headings */
  --fe-ink-soft:#5C534B;    /* body */
  --fe-ink-muted:#8A8076;   /* captions, helper */
  --fe-border:#EBE4DC;

  /* ── Medical status (calm) ── */
  --fe-success:#2E7D5B; --fe-success-bg:#E9F4EE;
  --fe-warning:#C07E2A; --fe-warning-bg:#FBF1E3;
  --fe-error:#BE463E;   --fe-error-bg:#FAECEA;
  --fe-info:#51685E;    --fe-info-bg:#E2EDE8;

  /* ── Typography ── */
  --fe-font-serif:'Cormorant Garamond',Georgia,serif; /* DISPLAY ≥24px ONLY */
  --fe-font-sans:'DM Sans',system-ui,sans-serif;       /* body + UI */
  --fe-font-mono:'IBM Plex Mono',ui-monospace,monospace; /* clinical data */

  /* fluid type scale */
  --fe-fs-display:clamp(2.6rem,5vw,4.1rem);
  --fe-fs-h2:clamp(1.9rem,3.6vw,2.75rem);
  --fe-fs-h3:clamp(1.25rem,2vw,1.5rem);
  --fe-fs-lead:1.125rem;
  --fe-fs-body:1rem;
  --fe-fs-small:0.9375rem;
  --fe-fs-xs:0.8125rem;
  --fe-lh-body:1.65; --fe-lh-tight:1.15;

  /* ── Spacing (rem scale) ── */
  --fe-s1:0.5rem; --fe-s2:1rem; --fe-s3:1.5rem; --fe-s4:2rem;
  --fe-s5:3rem; --fe-s6:4rem; --fe-s7:5rem;
  --fe-section-y:clamp(3rem,6vw,5rem);

  /* ── Shape ── */
  --fe-r-pill:999px; --fe-r-card:18px; --fe-r-sm:10px; --fe-r-xs:6px;

  /* ── Elevation (soft, warm, rose-tinted) ── */
  --fe-sh-soft:0 10px 34px rgba(158,79,86,0.10),0 3px 10px rgba(42,36,32,0.04);
  --fe-sh-lift:0 18px 48px rgba(158,79,86,0.14),0 6px 16px rgba(42,36,32,0.05);
  --fe-focus:0 0 0 3px var(--fe-rose-soft);

  /* ── Layout ── */
  --fe-container:1240px; --fe-measure:720px;

  /* ── Motion ── */
  --fe-dur:0.22s; --fe-ease:cubic-bezier(0.16,1,0.3,1);
}

/* Bridge tokens to Elementor Global Colors / WP presets so the page
   builder and block editor inherit the SAME source of truth.
   (Map these slugs in Elementor → Site Settings → Global Colors.) */
.has-rose-color{color:var(--fe-rose)!important;}
.has-rose-background-color{background-color:var(--fe-rose)!important;}
.has-sage-anchor-background-color{background-color:var(--fe-sage-anchor)!important;}

/* Accessibility floor — applies system-wide, not per-block */
a:focus-visible,button:focus-visible,
input:focus-visible,select:focus-visible,
.wp-block-button__link:focus-visible{outline:none;box-shadow:var(--fe-focus);}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:0.01ms!important;transition-duration:0.01ms!important;}
}
/* Guardrail: serif is display-only. Body/labels/buttons stay in sans. */
body,p,li,label,input,select,button,.wp-block-button__link,
figcaption,small{font-family:var(--fe-font-sans);}
h1,h2,h3,.fe-display{font-family:var(--fe-font-serif);font-weight:500;}
.fe-data,code,.price,.fe-mmhg{font-family:var(--fe-font-mono);}