/* ============================================================
   CAMINO PRAGMA — Colors & Type foundations
   Psicología Clínica · Colombia
   ------------------------------------------------------------
   Load fonts (Google Fonts CDN) before this file:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Great+Vibes&display=swap" rel="stylesheet">

   NOTE: The brand's display script is "Happy Birthday" (commercial,
   used in the logo wordmark). It is NOT on Google Fonts. We use the
   logo PNG for the real wordmark and substitute "Great Vibes" for
   decorative script accents. Replace --font-script if you license
   Happy Birthday and add the webfont to /fonts.
   ============================================================ */

:root {
  /* ---- Brand core (from brand manual / Paleta de colores) ---- */
  --cp-gold:        #d3960d;   /* dorado · calidez, vitalidad, cercanía */
  --cp-teal:        #184e66;   /* azul profundo · profesionalismo, confianza */
  --cp-cyan:        #52c0d1;   /* turquesa · frescura, serenidad */

  /* ---- Gold scale ---- */
  --cp-gold-700:    #9c6e08;
  --cp-gold-600:    #b97f0a;
  --cp-gold-500:    #d3960d;   /* base */
  --cp-gold-300:    #e8c473;
  --cp-gold-100:    #f6e7c2;
  --cp-gold-50:     #fbf4e2;

  /* ---- Teal (deep blue) scale ---- */
  --cp-teal-900:    #0f3344;
  --cp-teal-700:    #184e66;   /* base */
  --cp-teal-500:    #2e6e89;
  --cp-teal-300:    #7aa6b8;
  --cp-teal-100:    #cddde4;
  --cp-teal-50:     #eaf1f4;

  /* ---- Cyan (turquoise) scale ---- */
  --cp-cyan-700:    #2f97a8;
  --cp-cyan-500:    #52c0d1;   /* base */
  --cp-cyan-300:    #94d8e2;
  --cp-cyan-100:    #d3eef3;
  --cp-cyan-50:     #ecf8fa;

  /* ---- Neutrals (warm-leaning, calm) ---- */
  --cp-ink:         #16323f;   /* primary text — teal-black */
  --cp-ink-soft:    #45606b;   /* secondary text */
  --cp-muted:       #7d929b;   /* tertiary / captions */
  --cp-line:        #dfe7ea;   /* hairline borders */
  --cp-line-soft:   #edf1f2;
  --cp-paper:       #ffffff;   /* cards */
  --cp-cream:       #faf6ee;   /* warm page background */
  --cp-mist:        #f1f7f8;   /* cool section background */

  /* ---- Semantic ---- */
  --cp-bg:          var(--cp-cream);
  --cp-surface:     var(--cp-paper);
  --cp-primary:     var(--cp-teal);
  --cp-accent:      var(--cp-gold);
  --cp-accent-2:    var(--cp-cyan);
  --cp-text:        var(--cp-ink);
  --cp-text-2:      var(--cp-ink-soft);
  --cp-on-dark:     #f4fafb;

  /* ---- Type families ---- */
  --font-sans:    "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script:  "Great Vibes", "Apple Chancery", cursive; /* substitute for Happy Birthday */

  /* ---- Type scale (1.25 major-third-ish, calm) ---- */
  --fs-display:  clamp(2.75rem, 5vw, 4.25rem);
  --fs-h1:       clamp(2.1rem, 3.6vw, 3rem);
  --fs-h2:       clamp(1.6rem, 2.6vw, 2.1rem);
  --fs-h3:       1.4rem;
  --fs-h4:       1.15rem;
  --fs-body-lg:  1.18rem;
  --fs-body:     1rem;
  --fs-small:    0.875rem;
  --fs-caption:  0.78rem;

  /* ---- Weights ---- */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* ---- Line heights ---- */
  --lh-tight:    1.12;
  --lh-snug:     1.3;
  --lh-body:     1.65;

  /* ---- Letter spacing ---- */
  --ls-eyebrow:  0.22em;   /* spaced caps eyebrows (manual uses spaced caps) */
  --ls-tight:    -0.01em;
  --ls-normal:   0;

  /* ---- Radii (soft, fluid) ---- */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   22px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* ---- Spacing ---- */
  --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;

  /* ---- Shadows (soft, low-contrast, calm) ---- */
  --sh-sm:  0 1px 3px rgba(22,50,63,.06), 0 1px 2px rgba(22,50,63,.04);
  --sh-md:  0 6px 18px rgba(22,50,63,.08);
  --sh-lg:  0 18px 48px rgba(22,50,63,.12);
  --sh-cyan: 0 14px 36px rgba(82,192,209,.28);
}

/* ============================================================
   Base element styles
   ============================================================ */
body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--cp-text);
  background: var(--cp-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  color: var(--cp-teal);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }

p { margin: 0 0 1em; text-wrap: pretty; }

/* ---- Utility type classes ---- */
.cp-script   { font-family: var(--font-script); font-weight: 400; color: var(--cp-teal); line-height: 1; }
.cp-display  { font-size: var(--fs-display); font-weight: var(--fw-black); color: var(--cp-teal); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.cp-eyebrow  { font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--cp-gold); }
.cp-lede     { font-size: var(--fs-body-lg); font-weight: var(--fw-light); color: var(--cp-text-2); line-height: var(--lh-body); }
.cp-small    { font-size: var(--fs-small); }
.cp-caption  { font-size: var(--fs-caption); color: var(--cp-muted); }

a { color: var(--cp-teal); text-decoration-color: var(--cp-cyan); text-underline-offset: 3px; }