/* ============================================================
   ERM Fisioterapia — Colors & Type
   Source of truth: "Manual básico de identidad corporativa ERM v1"
   (Disset Consultors, 2021) + ermfisioterapiapalma.com
   ============================================================ */

/* ---- Webfonts ----------------------------------------------
   NOTE: The brand's exact fonts were not supplied. These are
   close substitutes (flagged to the user):
   - Poppins  → headings / brand voice (geometric, rounded, warm)
   - Mulish   → body / UI (humanist, highly legible)
   Loaded via Google Fonts <link> in each HTML file:
   https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Mulish:wght@400;500;600;700&display=swap
   ------------------------------------------------------------ */

:root {
  /* ===== BRAND COLORS (exact, from corporate manual) ===== */
  --erm-mint:        #98c7bc;  /* Pantone 564 C — soft mint teal  */
  --erm-pine:        #336e63;  /* Pantone 562 C — deep pine teal  */
  --erm-coral:       #d37269;  /* Pantone 7416 C — coral / salmon */

  /* ===== TEAL SCALE (derived around mint + pine) ===== */
  --teal-50:   #f1f8f6;
  --teal-100:  #ddeee9;
  --teal-200:  #c2e0d8;
  --teal-300:  #98c7bc;   /* = brand mint / Pantone 564 */
  --teal-400:  #6fb1a3;
  --teal-500:  #4f998a;
  --teal-600:  #3d8073;
  --teal-700:  #336e63;   /* = brand pine / Pantone 562 */
  --teal-800:  #2a574f;
  --teal-900:  #1f413b;

  /* ===== CORAL SCALE (derived around brand coral) ===== */
  --coral-50:  #fdf2f0;
  --coral-100: #fbe1dd;
  --coral-200: #f6c4bc;
  --coral-300: #eca096;
  --coral-400: #e08a7e;
  --coral-500: #d37269;   /* = brand coral / Pantone 7416 */
  --coral-600: #c0584f;
  --coral-700: #a3463e;

  /* ===== NEUTRALS (warm-leaning, calm clinical) ===== */
  --ink:       #243330;   /* primary text — deep desaturated teal-black */
  --ink-soft:  #4a5d58;   /* secondary text */
  --muted:     #7d8d89;   /* tertiary / captions */
  --line:      #e3ebe8;   /* hairline borders */
  --line-soft: #eef3f1;
  --surface:   #ffffff;   /* cards */
  --bg:        #f7faf9;   /* page background — faintest teal-white */
  --bg-cream:  #fbf9f5;   /* alt warm section bg */
  --white:     #ffffff;

  /* ===== SEMANTIC TOKENS ===== */
  --fg-1: var(--ink);
  --fg-2: var(--ink-soft);
  --fg-3: var(--muted);
  --primary:        var(--erm-pine);
  --primary-hover:  var(--teal-800);
  --secondary:      var(--erm-mint);
  --accent:         var(--erm-coral);
  --accent-hover:   var(--coral-600);
  --on-primary:     #ffffff;
  --on-accent:      #ffffff;

  /* ===== TYPE FAMILIES ===== */
  --font-display: "Poppins", system-ui, sans-serif;
  --font-body:    "Mulish", system-ui, sans-serif;

  /* ===== TYPE SCALE (px @ desktop) ===== */
  --fs-display: 64px;   --lh-display: 1.04;  --ls-display: -0.02em;
  --fs-h1:      48px;   --lh-h1: 1.08;       --ls-h1: -0.015em;
  --fs-h2:      36px;   --lh-h2: 1.12;       --ls-h2: -0.01em;
  --fs-h3:      26px;   --lh-h3: 1.2;        --ls-h3: -0.005em;
  --fs-h4:      20px;   --lh-h4: 1.3;
  --fs-eyebrow: 14px;   --lh-eyebrow: 1.2;   --ls-eyebrow: 0.18em;
  --fs-body-lg: 19px;   --lh-body-lg: 1.65;
  --fs-body:    16px;   --lh-body: 1.7;
  --fs-small:   14px;   --lh-small: 1.6;
  --fs-caption: 12px;   --lh-caption: 1.5;

  /* ===== RADII ===== */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 36px;
  --r-pill: 999px;

  /* ===== SHADOWS (soft, diffuse, teal-tinted) ===== */
  --shadow-sm:  0 1px 2px rgba(36,51,48,0.06), 0 1px 3px rgba(36,51,48,0.05);
  --shadow-md:  0 4px 12px rgba(36,51,48,0.07), 0 2px 6px rgba(36,51,48,0.05);
  --shadow-lg:  0 14px 40px rgba(31,65,59,0.12), 0 4px 12px rgba(31,65,59,0.06);
  --shadow-xl:  0 28px 70px rgba(31,65,59,0.16);

  /* ===== SPACING (8px base) ===== */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px;

  /* ===== MOTION ===== */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES (opt-in helpers)
   ============================================================ */
.erm-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.erm-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
}
.erm-h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); color: var(--fg-1); }
.erm-h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); color: var(--fg-1); }
.erm-h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); color: var(--fg-1); }
.erm-h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--fg-1); }
.erm-body-lg { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: var(--fg-2); }
.erm-body { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); }
.erm-small { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg-3); }