/* ============================================================
   AC Bienes Raíces Condominios — Design tokens
   ------------------------------------------------------------
   Punto único de verdad del sistema visual.
   El rojo es PROVISIONAL: al recibir el logo se sustituye
   --ac-red y sus derivados, y todo el sitio se actualiza solo.
   ============================================================ */

:root {
  /* ---------- Color: marca ---------- */
  /* Extraído del archivo del logo (logo_final.png), no estimado.
     Contraste sobre blanco: 6.66:1 — cumple AA con margen. */
  --ac-red: #bc0304;
  --ac-red-hover: #9a0203;
  --ac-red-dark: #7a0203;
  --ac-red-tint: #fdf1f1;     /* fondo suave para bloques de acento */
  --ac-red-border: #f0d3d3;

  /* ---------- Color: grises ---------- */
  --ac-ink: #16181c;          /* titulares y superficies oscuras */
  --ac-ink-soft: #2c3036;
  --ac-gray-700: #4a5058;     /* texto secundario sobre blanco */
  --ac-gray-500: #656c75;     /* 5.0:1 sobre gris claro — cumple AA como texto */
  --ac-gray-300: #b9bec5;     /* solo decorativo: NO usar en texto ni en bordes de campo */
  --ac-gray-200: #dfe2e6;     /* bordes */
  --ac-gray-100: #eef0f2;
  --ac-gray-50: #f7f8f9;      /* fondos de sección alternos */
  --ac-white: #ffffff;

  /* ---------- Color: roles ---------- */
  --ac-bg: var(--ac-white);
  --ac-bg-alt: var(--ac-gray-50);
  --ac-bg-dark: var(--ac-ink);
  --ac-text: var(--ac-ink);
  --ac-text-muted: var(--ac-gray-700);
  --ac-text-on-dark: #e9ebee;
  --ac-text-on-dark-muted: #a9b0b8;
  --ac-border: var(--ac-gray-200);
  --ac-border-dark: #3a3f46;
  /* WCAG 1.4.11 exige 3:1 en el contorno de los campos de formulario.
     Este token cumple 3.1:1 sobre blanco; --ac-gray-300 no llegaba (1.9:1). */
  --ac-border-input: #8b939c;
  --ac-focus: #1a6cd4;        /* foco accesible, distinto del rojo de marca */

  /* ---------- Tipografía ---------- */
  --ac-font-display: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --ac-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --ac-fs-xs: 0.8125rem;   /* 13px */
  --ac-fs-sm: 0.9375rem;   /* 15px */
  --ac-fs-base: 1.0625rem; /* 17px */
  --ac-fs-md: 1.1875rem;   /* 19px */
  --ac-fs-lg: 1.375rem;    /* 22px */
  --ac-fs-xl: 1.75rem;     /* 28px */
  --ac-fs-2xl: 2.25rem;    /* 36px */
  --ac-fs-3xl: 2.875rem;   /* 46px */
  --ac-fs-4xl: 3.5rem;     /* 56px */

  --ac-lh-tight: 1.15;
  --ac-lh-snug: 1.35;
  --ac-lh-base: 1.65;

  --ac-tracking-wide: 0.08em;   /* etiquetas en versalitas */
  --ac-tracking-tight: -0.015em;

  /* ---------- Espaciado (base 4px) ---------- */
  --ac-sp-1: 0.25rem;
  --ac-sp-2: 0.5rem;
  --ac-sp-3: 0.75rem;
  --ac-sp-4: 1rem;
  --ac-sp-5: 1.5rem;
  --ac-sp-6: 2rem;
  --ac-sp-7: 2.5rem;
  --ac-sp-8: 3rem;
  --ac-sp-9: 4rem;
  --ac-sp-10: 5rem;
  --ac-sp-11: 6.5rem;
  --ac-sp-12: 8rem;

  /* Ritmo vertical de secciones */
  --ac-section-y: var(--ac-sp-9);
  --ac-section-y-lg: var(--ac-sp-11);

  /* ---------- Layout ---------- */
  --ac-container: 1200px;
  --ac-container-narrow: 760px;
  --ac-gutter: var(--ac-sp-5);
  --ac-header-h: 76px;

  /* ---------- Formas ---------- */
  --ac-radius-sm: 2px;
  --ac-radius: 4px;
  --ac-radius-lg: 8px;

  --ac-shadow-sm: 0 1px 2px rgba(22, 24, 28, 0.06);
  --ac-shadow: 0 2px 8px rgba(22, 24, 28, 0.07), 0 1px 2px rgba(22, 24, 28, 0.05);
  --ac-shadow-lg: 0 12px 32px rgba(22, 24, 28, 0.12);

  /* ---------- Movimiento ---------- */
  --ac-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ac-dur: 180ms;
  --ac-dur-slow: 320ms;

  --ac-z-header: 100;
  --ac-z-overlay: 200;
}

/* Breakpoints de referencia (no son tokens usables en @media,
   se documentan aquí para mantener consistencia):
     sm  → 480px
     md  → 768px   tablet
     lg  → 1024px
     xl  → 1280px  escritorio amplio
*/

@media (min-width: 768px) {
  :root {
    --ac-gutter: var(--ac-sp-6);
    --ac-section-y: var(--ac-sp-10);
    --ac-section-y-lg: var(--ac-sp-12);
    --ac-header-h: 88px;
  }
}

/* Respeta la preferencia del sistema de reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ac-dur: 1ms;
    --ac-dur-slow: 1ms;
  }
}