/* =====================================================================
   SwipeHome · Tokens de diseño (v1, 21-oct-2026)
   Fuente única de colores, tipografía, espaciado, radios, sombras y movimiento.
   Documentación: portal-inmobiliario/SISTEMA-DE-DISENO.md
   Regla: site.css y panel.css usan SOLO estas variables (nada de #hex sueltos).
   ===================================================================== */
:root {
  /* --- Marca (logo: casa con flecha rosa-coral; «Home» en degradado rosa → naranja) --- */
  /* v2 (21-oct): sin carmesí. Acción principal = degradado del logo con texto oscuro, como la portada. */
  --c-brand: #ec4899;          /* casillas y detalles sólidos (3.5:1 sobre blanco, requisito de controles) */
  --c-brand-ink: #be185d;      /* texto de marca sobre claro: enlaces (6.0:1) */
  --c-brand-soft: #fce7f3;     /* fondos suaves de marca */
  --c-brand-soft-ink: #9d174d; /* texto sobre --c-brand-soft (6.7:1) */
  --c-brand-pink: #f472b6;     /* inicio del degradado del logo; texto sobre oscuro */
  --c-brand-orange: #fb923c;   /* fin del degradado */
  --c-on-brand: #1a0b14;       /* texto sobre el degradado (7.2:1 en rosa, 8.4:1 en naranja) */
  --g-brand: linear-gradient(90deg, var(--c-brand-pink), var(--c-brand-orange));
  --g-brand-hover: linear-gradient(90deg, #ec4899, #f97316); /* texto oscuro encima ≥5.4:1 */

  /* --- Superficies oscuras (portada, panel, Explorar) --- */
  --c-night: #0f172a;
  --c-night-2: #1e1b4b;
  --g-night: radial-gradient(900px 420px at 85% -20%, #3b1d4a 0%, transparent 60%),
             linear-gradient(180deg, var(--c-night) 0%, var(--c-night-2) 100%);
  --c-on-night: #f8fafc;
  --c-on-night-muted: #cbd5e1; /* 12:1 */
  --c-on-night-soft: #94a3b8;  /* 7:1 */

  /* --- Neutros --- */
  --c-white: #ffffff;
  --c-ink: #0f172a;            /* texto principal (17:1) */
  --c-ink-2: #334155;
  --c-muted: #526077;          /* texto secundario: ≥4.5:1 sobre bg, surface y sunken */
  --c-line: #e2e8f0;           /* separadores */
  --c-line-strong: #7c8aa0;    /* bordes de campos (3.5:1, requisito de controles) */
  --c-bg: #f8fafc;
  --c-surface: #ffffff;
  --c-sunken: #f1f5f9;

  /* --- Semánticos --- */
  --c-success: #15803d;  --c-success-hover: #166534;  --c-success-soft: #dcfce7;  --c-success-ink: #14532d;
  --c-warning: #d97706;  --c-warning-soft: #fef3c7;   --c-warning-ink: #78350f;
  --c-danger: #b91c1c;   --c-danger-soft: #fee2e2;    --c-danger-ink: #7f1d1d;    --c-danger-line: #fca5a5;
  --c-demo: #78350f;           /* aviso y etiqueta «Demo»: ámbar oscuro (blanco encima 9.5:1), sin rojo */
  --c-wa: #15803d;  --c-wa-hover: #166534;   /* WhatsApp (blanco encima 5.0:1) */
  --c-like: #15803d;  --c-pass: #b91c1c;     /* Explorar */
  --c-focus: #c2410c;          /* anillo de foco sobre claro */
  --c-focus-on-night: #fbbf24; /* anillo de foco sobre oscuro */

  /* --- Tipografía --- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: .75rem;   --fs-sm: .875rem;  --fs-base: 1rem;  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;  --fs-xl: 1.5rem;   --fs-2xl: clamp(1.5rem, 4vw, 2.1rem);
  --fs-3xl: clamp(1.8rem, 5vw, 2.6rem);
  --fw-regular: 400;  --fw-semibold: 600;  --fw-bold: 700;  --fw-black: 800;
  --lh-tight: 1.2;  --lh-base: 1.5;

  /* --- Espaciado (base 4 px) --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;  --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* --- Radios --- */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 16px;  --r-xl: 20px;  --r-pill: 999px;

  /* --- Sombras --- */
  --sh-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 2px 6px rgba(15, 23, 42, .05);
  --sh-md: 0 1px 2px rgba(15, 23, 42, .06), 0 6px 18px rgba(15, 23, 42, .08);
  --sh-lg: 0 10px 30px rgba(15, 23, 42, .18);

  /* --- Movimiento --- */
  --dur-fast: 120ms;  --dur-base: 200ms;  --dur-slow: 260ms;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* --- Tamaño mínimo de toque --- */
  --touch: 44px;
}