/* ============================================
   ZEN MODERNO — Design Tokens
   ============================================ */

:root {
  /* ── Primary Palette ── */
  --color-primary:        #14b881;
  --color-primary-dark:   #0f9d6e;
  --color-primary-light:  #2edba0;
  --color-primary-10:     rgba(20, 184, 129, 0.10);
  --color-primary-20:     rgba(20, 184, 129, 0.20);
  --color-primary-30:     rgba(20, 184, 129, 0.30);
  --color-primary-05:     rgba(20, 184, 129, 0.05);

  /* ── Neutral / Background ── */
  --color-bg-light:       #f6f8f7;
  --color-bg-dark:        #11211c;
  --color-white:          #ffffff;
  --color-surface:        #ffffff;

  /* ── Warm Spa Palette (from user image) ── */
  --color-beige:          #f5efe6;
  --color-beige-dark:     #e8ddd0;
  --color-gold:           #c9a96e;
  --color-gold-light:     #d4b87e;

  /* ── Text ── */
  --color-text-primary:   #1e293b;
  --color-text-secondary: #64748b;
  --color-text-muted:     #94a3b8;
  --color-text-light:     #cbd5e1;
  --color-text-white:     #f1f5f9;

  /* ── Borders ── */
  --color-border-light:   rgba(20, 184, 129, 0.10);
  --color-border-medium:  rgba(20, 184, 129, 0.20);

  /* ── Typography ── */
  --font-body:            'Manrope', system-ui, -apple-system, sans-serif;
  --font-display:         'Playfair Display', Georgia, 'Times New Roman', serif;

  --fw-light:             300;
  --fw-regular:           400;
  --fw-medium:            500;
  --fw-semibold:          600;
  --fw-bold:              700;

  /* ── Font Sizes (fluid) ── */
  --fs-xs:                0.75rem;    /* 12px */
  --fs-sm:                0.875rem;   /* 14px */
  --fs-base:              1rem;       /* 16px */
  --fs-lg:                1.125rem;   /* 18px */
  --fs-xl:                1.25rem;    /* 20px */
  --fs-2xl:               1.5rem;     /* 24px */
  --fs-3xl:               1.875rem;   /* 30px */
  --fs-4xl:               2.25rem;    /* 36px */
  --fs-5xl:               3rem;       /* 48px */
  --fs-6xl:               3.75rem;    /* 60px */
  --fs-7xl:               4.5rem;     /* 72px */

  /* ── Spacing ── */
  --space-1:              0.25rem;
  --space-2:              0.5rem;
  --space-3:              0.75rem;
  --space-4:              1rem;
  --space-5:              1.25rem;
  --space-6:              1.5rem;
  --space-8:              2rem;
  --space-10:             2.5rem;
  --space-12:             3rem;
  --space-16:             4rem;
  --space-20:             5rem;
  --space-24:             6rem;

  /* ── Border Radius ── */
  --radius-sm:            0.25rem;
  --radius-md:            0.5rem;
  --radius-lg:            0.75rem;
  --radius-xl:            1rem;
  --radius-2xl:           1.5rem;
  --radius-full:          9999px;

  /* ── Shadows ── */
  --shadow-sm:            0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:            0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg:            0 10px 25px rgba(0, 0, 0, 0.10);
  --shadow-xl:            0 20px 50px rgba(0, 0, 0, 0.12);
  --shadow-primary:       0 10px 30px rgba(20, 184, 129, 0.20);

  /* ── Transitions ── */
  --transition-fast:      150ms ease;
  --transition-base:      300ms ease;
  --transition-slow:      500ms ease;

  /* ── Layout ── */
  --max-width:            80rem;  /* 1280px */
  --nav-height:           4.5rem;
}