/* =========================================================
   LA MARINA HOTEL — DESIGN TOKENS
   Single source of truth for color, type, spacing, radius,
   shadow and motion. Edit values here to restyle the site.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Manrope:wght@400;500;600;700&display=swap');

:root{
  /* ---- Brand colors (hex) ---- */
  --lm-primary:        #0F6D8F;  /* main teal-blue */
  --lm-primary-light:  #4FA9C7;  /* hover / lighter accent */
  --lm-primary-dark:   #0F3A4D;  /* deep navy section bg */
  --lm-navy:            #0B2B38; /* footer / darkest bg */
  --lm-accent:          #F8D96B; /* gold/yellow CTA */
  --lm-accent-soft:     #FCEFCB; /* pale cream for italic accents */
  --lm-gold:            #EAB94B; /* icon gold */
  --lm-green:           #4F7D59; /* leaf/dot accent */
  --lm-whatsapp:        #25D366;
  --lm-messenger:       #0084FF;

  /* ---- Brand colors (rgb triplets, for rgba() alpha control) ---- */
  --lm-primary-rgb:      15,109,143;
  --lm-primary-dark-rgb: 15,58,77;
  --lm-navy-rgb:         11,40,55;
  --lm-accent-rgb:       248,217,107;
  --lm-white-rgb:        255,255,255;

  /* ---- Neutrals / text ---- */
  --lm-ink:           #1F2933;  /* primary text on light bg */
  --lm-ink-soft:      #324049;  /* secondary heading text */
  --lm-ink-faint:     #2b3942;
  --lm-text-muted:    #5b6470;  /* body copy */
  --lm-text-mute-2:   #7a8590;  /* captions / meta */
  --lm-text-mute-3:   #9aa4ac;  /* faint labels */
  --lm-border-faint:  #c3ccd2;

  --lm-bg:        #FAF8F5; /* warm sand page background */
  --lm-bg-tan:    #EEDFC6; /* "why choose us" section bg */
  --lm-white:     #ffffff;

  /* ---- Typography ---- */
  --lm-font-heading: 'Cormorant Garamond', serif;
  --lm-font-body:    'Manrope', sans-serif;

  --lm-fs-hero-title:    clamp(48px, 8vw, 96px);
  --lm-fs-cta-title:     clamp(38px, 6vw, 72px);
  --lm-fs-section-title: clamp(32px, 4.6vw, 58px);
  --lm-fs-body:          17px;

  /* ---- Layout ---- */
  --lm-gutter:          clamp(20px, 5vw, 56px);
  --lm-container:       1240px;
  --lm-container-wide:  1280px;

  /* ---- Radius ---- */
  --lm-radius-pill: 999px;
  --lm-radius-xl:   26px;
  --lm-radius-lg:   24px;
  --lm-radius-md:   20px;
  --lm-radius-sm:   16px;
  --lm-radius-xs:   11px;

  /* ---- Shadow ---- */
  --lm-shadow-card:    0 24px 60px -34px rgba(var(--lm-primary-rgb), .40);
  --lm-shadow-card-lg: 0 36px 80px -36px rgba(var(--lm-primary-rgb), .45);
  --lm-shadow-pop:     0 18px 40px -22px rgba(var(--lm-primary-rgb), .50);
  --lm-shadow-btn:     0 14px 34px -16px rgba(var(--lm-primary-rgb), .80);
  --lm-shadow-accent:  0 18px 44px -16px rgba(var(--lm-accent-rgb), .80);

  /* ---- Motion ---- */
  --lm-ease:       cubic-bezier(.2,.7,.2,1);
  --lm-dur-fast:   .25s;
  --lm-dur-base:   .35s;
  --lm-dur-slow:   .8s;
}