/* ============================================
   ECP – Design System Variables  (v2)
   ============================================ */

:root {
  /* ── Brand Palette ── */
  --ecp-navy:        #22313F;   /* accent dark navy */
  --ecp-navy-hover:  #2C3E4F;
  --ecp-navy-dark:   #1A2730;

  --ecp-gold:        #B8A07A;   /* muted gold-beige accent */
  --ecp-gold-light:  #C9B48E;
  --ecp-gold-dark:   #9E8660;

  --ecp-slate:       #5F6368;   /* secondary text */
  --ecp-taupe:       #D8D1C7;   /* soft taupe dividers */

  /* ── Surface Colors ── */
  --ecp-bg:          #F8F6F2;   /* warm off-white background */
  --ecp-white:       #FFFFFF;
  --ecp-light-gray:  #F8F6F2;   /* alias for section bg */
  --ecp-cool-gray:   #E8E4DF;   /* borders */

  /* ── Text Colors ── */
  --ecp-text:        #1F1F1F;
  --ecp-text-light:  #5F6368;
  --ecp-text-muted:  #8A9099;

  /* ── Status ── */
  --ecp-success:     #3BAA65;
  --ecp-error:       #D9534F;
  --ecp-warning:     #E8A020;

  /* ── Typography ── */
  --font-heading:    'Playfair Display', 'Georgia', serif;
  --font-body:       'Inter', 'Manrope', sans-serif;
  --font-zh:         'Noto Sans SC', sans-serif;

  /* ── Font Sizes ── */
  --fs-h1:      clamp(38px, 4.5vw, 60px);
  --fs-h2:      clamp(28px, 3vw, 42px);
  --fs-h3:      clamp(20px, 2.2vw, 26px);
  --fs-h4:      clamp(17px, 1.8vw, 21px);
  --fs-body:    17px;
  --fs-sm:      15px;
  --fs-xs:      13px;
  --fs-caption: 12px;

  /* ── Line Heights ── */
  --lh-heading: 1.20;
  --lh-body:    1.70;
  --lh-relaxed: 1.85;

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

  /* ── Spacing ── */
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   24px;
  --space-lg:   48px;
  --space-xl:   80px;
  --space-2xl:  112px;
  --space-3xl:  144px;

  /* ── Layout ── */
  --max-width:   1200px;
  --full-width:  1440px;
  --gutter:      24px;
  --section-pad: 112px;
  --section-pad-mobile: 64px;

  /* ── Border ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  14px;
  --radius-xl:  24px;
  --border-thin: 1px solid var(--ecp-cool-gray);
  --border-taupe: 1px solid var(--ecp-taupe);
  --border-gold:  1px solid var(--ecp-gold);

  /* ── Shadows ── */
  --shadow-sm:  0 1px 6px rgba(34, 49, 63, 0.06);
  --shadow-md:  0 4px 20px rgba(34, 49, 63, 0.09);
  --shadow-lg:  0 8px 40px rgba(34, 49, 63, 0.12);
  --shadow-xl:  0 16px 60px rgba(34, 49, 63, 0.16);
  --shadow-gold: 0 4px 24px rgba(184, 160, 122, 0.28);

  /* ── Transitions ── */
  --transition-fast:   all 0.15s ease;
  --transition-base:   all 0.25s ease;
  --transition-slow:   all 0.40s ease;
  --transition-spring: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-index ── */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}