/* Dear Costa Rica — design tokens (single source of truth).
   Mirrors the prototype's :root. Elementor Global colours/fonts should be set
   to these same values so the builder UI and the CSS agree. */

:root {
  /* Brand palette */
  --dcr-forest:  #0F2A26;
  --dcr-paper:   #F3EFE8;
  --dcr-coral:   #E26A55;
  --dcr-sage:    #7D8F7A;
  --dcr-ink:     #1A1A1A;

  /* Derived / support */
  --dcr-forest-2:  #12332B;  /* dark card-grid bg */
  --dcr-forest-3:  #0B241E;  /* area-stage bg */
  --dcr-paper-2:   #EFE8DB;  /* "why go" bg */
  --dcr-paper-3:   #E9DFCE;  /* culture split bg */
  --dcr-paper-4:   #E5E8DF;  /* stay section bg */
  --dcr-coral-ink: #C95E4C;  /* coral hover */
  --dcr-line:      rgba(15,42,38,.22);
  --dcr-line-dark: rgba(255,255,255,.28);
  --dcr-body:      #3C4A44;  /* prose text on light */
  --dcr-muted:     #6A7168;  /* labels / captions */

  /* Type */
  --dcr-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --dcr-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Layout rhythm */
  --dcr-content-max: 1440px;
  --dcr-gutter: clamp(24px, 5vw, 80px);
  --dcr-section-y: clamp(64px, 7vw, 116px);
  --dcr-ease: cubic-bezier(.22, 1, .36, 1);

  /* Type scale (fluid) — use these in Elementor custom CSS or HTML widgets */
  --dcr-h1-hero:   clamp(58px, 7.6vw, 120px);
  --dcr-h1:        clamp(52px, 7vw, 104px);
  --dcr-h2:        clamp(42px, 5vw, 80px);
  --dcr-h2-sm:     clamp(40px, 4.6vw, 68px);
  --dcr-h3:        clamp(26px, 2.8vw, 42px);
  --dcr-h3-sm:     clamp(20px, 1.8vw, 27px);
  --dcr-lede:      clamp(17px, 1.5vw, 21px);
  --dcr-body-size: 16px;
  --dcr-kicker:    11px;
}