/* ============================================
   BRS21 — Design System Variables
   Bienes Raíces Siglo 21 | Mundo Inmobiliario
   ============================================ */

:root {
  /* ── COLORES PRIMARIOS (extraídos del logo) ── */
  --navy-deep:     #0D1B2A;   /* Fondo principal */
  --navy-mid:      #1B3A5C;   /* Fondos secundarios */
  --navy-light:    #2A5080;   /* Hover states */
  --steel-blue:    #2E6DA4;   /* Acentos, links */

  /* ── METÁLICOS / GRISES ── */
  --chrome:        #C0C8D2;   /* Texto sobre oscuro */
  --platinum:      #E8ECF0;   /* Texto principal claro */
  --silver:        #A8B4C0;   /* Subtítulos, labels */
  --slate:         #4A5568;   /* Texto sobre fondo claro */

  /* ── ACENTO DORADO (premium/CTA) ── */
  --gold:          #B8972E;
  --gold-light:    #D4AE45;
  --gold-dark:     #8A6E1E;

  /* ── NEUTROS ── */
  --white:         #FFFFFF;
  --off-white:     #F8F9FA;
  --dark:          #080F18;

  /* ── GRADIENTES ── */
  --grad-hero:     linear-gradient(135deg, #080F18 0%, #0D1B2A 50%, #1B3A5C 100%);
  --grad-navy:     linear-gradient(180deg, #0D1B2A 0%, #1B3A5C 100%);
  --grad-gold:     linear-gradient(135deg, #B8972E 0%, #D4AE45 100%);
  --grad-card:     linear-gradient(135deg, rgba(27,58,92,0.4) 0%, rgba(13,27,42,0.6) 100%);

  /* ── TIPOGRAFÍA ── */
  --font-display:  'Cormorant Garamond', Georgia, serif;
  --font-body:     'Inter', system-ui, -apple-system, sans-serif;

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

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

  /* ── BORDES ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── SOMBRAS ── */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.5);
  --shadow-gold: 0 4px 24px rgba(184,151,46,0.3);
  --shadow-glow: 0 0 40px rgba(46,109,164,0.2);

  /* ── GLASSMORPHISM ── */
  --glass-bg:     rgba(27, 58, 92, 0.25);
  --glass-border: rgba(192, 200, 210, 0.2);
  --glass-blur:   blur(12px);

  /* ── TRANSICIONES ── */
  --trans-fast:   0.15s ease;
  --trans-base:   0.25s ease;
  --trans-slow:   0.4s ease;
  --trans-bounce: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── LAYOUT ── */
  --max-width:    1280px;
  --nav-height:   80px;
  --section-py:   var(--space-24);
}