/* ============================================================
   AGUADEMAR — Variables de Diseño
   Sal Marina 100% Orgánica de Ecuador
   ============================================================ */

:root {

  /* ── Paleta Principal ── */
  --navy:        #0a1628;
  --navy-light:  #1a2d4a;
  --navy-mid:    #122040;
  --gold:        #c9a84c;
  --gold-light:  #e8d08a;
  --gold-dark:   #a8832a;
  --teal:        #7ecac3;
  --teal-light:  #b8e8e4;
  --teal-dark:   #4fa89f;
  --pearl:       #f5f0e8;
  --pearl-dark:  #e8dfd0;
  --pearl-mid:   #ede5d6;
  --white:       #ffffff;

  /* ── Texto ── */
  --text-dark:   #0a1628;
  --text-muted:  #5a7a8a;
  --text-light:  #f5f0e8;
  --text-subtle: #8aa5b5;

  /* ── Fondos ── */
  --bg-page:     #f5f0e8;
  --bg-white:    #ffffff;
  --bg-navy:     #0a1628;

  /* ── Tipografía ── */
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* ── Espaciado ── */
  --space-2xs:  0.25rem;   /*  4px */
  --space-xs:   0.5rem;    /*  8px */
  --space-sm:   0.75rem;   /* 12px */
  --space-md:   1rem;      /* 16px */
  --space-lg:   1.5rem;    /* 24px */
  --space-xl:   2rem;      /* 32px */
  --space-2xl:  3rem;      /* 48px */
  --space-3xl:  4rem;      /* 64px */
  --space-4xl:  6rem;      /* 96px */

  /* ── Radios ── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-pill: 9999px;

  /* ── Sombras ── */
  --shadow-xs:  0 1px 3px rgba(10, 22, 40, 0.08);
  --shadow-sm:  0 4px 12px rgba(10, 22, 40, 0.12);
  --shadow-md:  0 8px 24px rgba(10, 22, 40, 0.15);
  --shadow-lg:  0 16px 40px rgba(10, 22, 40, 0.18);
  --shadow-xl:  0 24px 64px rgba(10, 22, 40, 0.22);
  --shadow-gold: 0 8px 32px rgba(201, 168, 76, 0.3);
  --shadow-teal: 0 8px 32px rgba(126, 202, 195, 0.25);

  /* ── Glassmorphism ── */
  --glass-bg:          rgba(255, 255, 255, 0.08);
  --glass-bg-light:    rgba(255, 255, 255, 0.85);
  --glass-bg-navy:     rgba(10, 22, 40, 0.75);
  --glass-border:      rgba(255, 255, 255, 0.15);
  --glass-border-gold: rgba(201, 168, 76, 0.4);
  --glass-blur:        blur(16px);
  --glass-blur-sm:     blur(8px);

  /* ── Transiciones ── */
  --ease-elegant:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:   cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   200ms;
  --duration-base:   350ms;
  --duration-slow:   600ms;
  --duration-slower: 900ms;

  /* ── Degradados de Marca ── */
  --grad-brand:      linear-gradient(135deg, var(--gold) 0%, var(--teal) 100%);
  --grad-navy:       linear-gradient(180deg, var(--navy) 0%, var(--navy-light) 100%);
  --grad-hero-overlay: linear-gradient(
    to bottom,
    rgba(10, 22, 40, 0.72) 0%,
    rgba(10, 22, 40, 0.45) 50%,
    rgba(10, 22, 40, 0.65) 100%
  );
  --grad-gold:       linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 50%, var(--gold-light) 100%);
  --grad-teal:       linear-gradient(135deg, var(--teal-dark) 0%, var(--teal) 100%);
  --grad-card-navy:  linear-gradient(145deg, var(--navy-light) 0%, var(--navy-mid) 100%);

  /* ── Z-Index ── */
  --z-base:    1;
  --z-card:    10;
  --z-overlay: 100;
  --z-modal:   500;
  --z-navbar:  1000;
  --z-toast:   2000;
}