/* ============================================================
   DELAO INVESTMENT — DESIGN TOKENS / CSS VARIABLES
   Sistema visual premium para plataforma inmobiliaria
   ============================================================ */

:root {
  /* ── COLORES PRIMARIOS ─────────────────────────────────── */
  --color-primary:        #0B1F3A;   /* Deep navy premium */
  --color-primary-light:  #1E5EFF;   /* Azul eléctrico / botones */
  --color-primary-dark:   #060F1D;   /* Navy oscuro */
  --color-primary-rgb:    11, 31, 58;

  --color-accent:         #C9A85D;   /* Dorado elegante premium */
  --color-accent-light:   #E4C97E;   /* Dorado claro */
  --color-accent-dark:    #A88640;   /* Dorado oscuro */
  --color-accent-rgb:     201, 168, 93;

  /* ── NEUTROS ────────────────────────────────────────────── */
  --color-dark:           #0B1F3A;
  --color-gray-900:       #0F172A;   /* Texto principal */
  --color-gray-800:       #1E293B;
  --color-gray-700:       #334155;
  --color-gray-600:       #475569;   /* Texto secundario */
  --color-gray-500:       #64748B;
  --color-gray-400:       #94A3B8;
  --color-gray-300:       #CBD5E1;
  --color-gray-200:       #E2E8F0;
  --color-gray-100:       #F1F5F9;
  --color-white:          #FFFFFF;

  /* ── SUPERFICIE ─────────────────────────────────────────── */
  --color-bg:             #F5F7FA;   /* Fondo principal, no blanco puro */
  --color-bg-card:        #FFFFFF;   /* Cards blanco suave */
  --color-bg-dark:        #0B1F3A;
  --color-bg-section:     #EEF2F7;   /* Secciones alternadas, gris azulado */

  /* ── TEXTO ──────────────────────────────────────────────── */
  --color-text:           #0F172A;   /* Texto principal */
  --color-text-secondary: #475569;   /* Texto secundario */
  --color-text-muted:     #64748B;   /* Texto tenue */

  /* ── ESTADO ─────────────────────────────────────────────── */
  --color-success:        #38A169;
  --color-success-light:  #C6F6D5;
  --color-warning:        #D69E2E;
  --color-warning-light:  #FEFCBF;
  --color-error:          #E53E3E;
  --color-error-light:    #FED7D7;
  --color-info:           #3182CE;
  --color-info-light:     #BEE3F8;

  /* ── ETIQUETAS COMERCIALES ──────────────────────────────── */
  --badge-featured:       #C9A85C;
  --badge-new:            #38A169;
  --badge-opportunity:    #E53E3E;
  --badge-exclusive:      #1B3A5C;
  --badge-sale:           #2C5282;
  --badge-rent:           #2D8B6F;

  /* ── TIPOGRAFÍA ─────────────────────────────────────────── */
  --font-heading:   'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-body:      'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:      'DM Mono', 'Courier New', monospace;

  /* Escala tipográfica */
  --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:   4rem;        /* 64px */

  /* Pesos */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-extrabold:800;

  /* Interlineado */
  --lh-tight:   1.25;
  --lh-snug:    1.375;
  --lh-normal:  1.5;
  --lh-relaxed: 1.625;
  --lh-loose:   2;

  /* ── ESPACIADO ──────────────────────────────────────────── */
  --space-1:    0.25rem;   /* 4px */
  --space-2:    0.5rem;    /* 8px */
  --space-3:    0.75rem;   /* 12px */
  --space-4:    1rem;      /* 16px */
  --space-5:    1.25rem;   /* 20px */
  --space-6:    1.5rem;    /* 24px */
  --space-8:    2rem;      /* 32px */
  --space-10:   2.5rem;    /* 40px */
  --space-12:   3rem;      /* 48px */
  --space-16:   4rem;      /* 64px */
  --space-20:   5rem;      /* 80px */
  --space-24:   6rem;      /* 96px */
  --space-32:   8rem;      /* 128px */

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

  --border-color:       var(--color-gray-300);
  --border-color-focus: var(--color-primary);

  /* ── SOMBRAS ────────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 12px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  --shadow-lg:  0 10px 30px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.07);
  --shadow-xl:  0 20px 50px rgba(0,0,0,.15), 0 8px 24px rgba(0,0,0,.09);
  --shadow-card:0 2px 8px rgba(27,58,92,.08), 0 1px 4px rgba(0,0,0,.04);
  --shadow-card-hover: 0 8px 32px rgba(27,58,92,.15), 0 4px 12px rgba(0,0,0,.08);

  /* ── TRANSICIONES ───────────────────────────────────────── */
  --transition-fast:   all 0.15s ease;
  --transition-normal: all 0.3s ease;
  --transition-slow:   all 0.5s ease;

  /* ── LAYOUT ─────────────────────────────────────────────── */
  --container-max: 1280px;
  --container-px:  var(--space-6);
  --nav-height:    72px;

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

/* ── El sitio usa siempre tema claro — sin modo oscuro automático ── */
:root {
  color-scheme: light;
}

/* ── BREAKPOINTS (referencia — usar en media queries) ───── */
/* xs:  0px      — móvil pequeño                            */
/* sm:  640px    — móvil grande                             */
/* md:  768px    — tablet                                   */
/* lg:  1024px   — laptop                                   */
/* xl:  1280px   — desktop                                  */
/* 2xl: 1536px   — pantalla grande                          */