/**
 * San Mateo S.A. — tokens alineados a Real Estate Management.html (UX Pilot / Tailwind)
 */
:root {
  /* Petrol */
  --sm-petrol-50: #f2f7f7;
  --sm-petrol-100: #e0edeb;
  --sm-petrol-200: #c2dbd8;
  --sm-petrol-300: #9ac1bc;
  --sm-petrol-400: #6ea09a;
  --sm-petrol-500: #50857f;
  --sm-petrol-600: #3e6a66;
  --sm-petrol-700: #345552;
  --sm-petrol-800: #234442;
  --sm-petrol-900: #213a38;
  --sm-petrol-950: #112221;

  /* Brand red */
  --sm-brand-red-50: #fdf3f3;
  --sm-brand-red-100: #fbe4e4;
  --sm-brand-red-200: #f7cece;
  --sm-brand-red-300: #f0acac;
  --sm-brand-red-400: #e57a7a;
  --sm-brand-red-500: #d55050;
  --sm-brand-red-600: #c03636;
  --sm-brand-red-700: #a12929;
  --sm-brand-red-800: #8c2424;
  --sm-brand-red-900: #752323;
  --sm-brand-red-950: #3f0e0e;

  /* Semánticos (mapeo referencia) */
  --sm-teal: var(--sm-petrol-800);
  --sm-teal-dark: var(--sm-petrol-900);
  --sm-teal-mid: var(--sm-petrol-600);
  --sm-teal-soft: var(--sm-petrol-50);
  --sm-red: var(--sm-brand-red-600);
  --sm-red-hover: var(--sm-brand-red-700);

  /* Grises Tailwind */
  --sm-white: #ffffff;
  --sm-black: #1f2937;
  --sm-gray-50: #f9fafb;
  --sm-gray-100: #f3f4f6;
  --sm-gray-200: #e5e7eb;
  --sm-gray-300: #d1d5db;
  --sm-gray-400: #9ca3af;
  --sm-gray-500: #6b7280;
  --sm-gray-600: #4b5563;
  --sm-gray-800: #1f2937;

  --sm-green-100: #dcfce7;
  --sm-green-200: #bbf7d0;
  --sm-green-600: #16a34a;

  --sm-whatsapp: #25d366;
  --sm-radius: 12px;
  --sm-radius-sm: 8px;
  --sm-shadow: 0 4px 24px rgba(33, 58, 56, 0.08);
  --sm-shadow-card: 0 8px 32px rgba(33, 58, 56, 0.1);
  /* Sans: cuerpo, UI, formularios. Serif: todos los títulos (h1–h6). */
  --sm-font: "Inter", system-ui, -apple-system, sans-serif;
  --sm-font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sm-font-heading: var(--sm-font-serif);
  --sm-max: 1200px;
  --sm-gutter: 1rem;
  --sm-header-h: 5rem;

  /* Hero interior unificado (with-breadcrumb); la portada usa sm-hero--home */
  --sm-hero-inner-h: clamp(20rem, 42vh, 28rem);
  --sm-hero-inner-pad-block: clamp(2.25rem, 5vw, 2.75rem);

  /* Interacciones */
  --sm-btn-border: 2px;
  --sm-btn-min-h: 3rem;
  --sm-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --sm-duration: 0.2s;
  --sm-duration-fast: 0.15s;
  --sm-shadow-hover: 0 8px 24px rgba(33, 58, 56, 0.12);
  --sm-lift-hover: -2px;
}