/* ============================================================
   AtréveTemuco — tokens.css
   Sistema de diseño (variables CSS globales)
   ------------------------------------------------------------
   Fuente única de verdad de colores, tipografía, spacing, radios
   y sombras. Enlazar ANTES de atv-theme.css en cada plantilla.
   No sobreescribir valores aquí desde una pantalla: usar las
   variables. Cualquier cambio de marca se hace SOLO en este
   archivo y se propaga a todo el sitio.
   ============================================================ */

:root {
  /* ---------- Marca ---------- */
  --atv-red: #D81C24;          /* rojo marca — CTAs, acentos */
  --atv-red-dark: #B01820;     /* hover de CTAs rojos */
  --atv-red-soft: #F7ECED;     /* fondo suave rojizo (chips, iconos) */
  --atv-black: #111111;        /* negro marca — texto fuerte, fondos */
  --atv-white: #FFFFFF;

  /* ---------- Neutros de apoyo ---------- */
  --atv-ink: #1A1A1A;          /* texto principal */
  --atv-ink-2: #4A4A4A;        /* texto de párrafo denso */
  --atv-gray-600: #5A5A5A;     /* texto secundario */
  --atv-gray-500: #6E6E6E;     /* texto de apoyo / descripciones */
  --atv-gray-400: #8A8A8A;     /* labels / placeholders fuertes */
  --atv-gray-300: #9A9A9A;     /* microcopy, breadcrumb */
  --atv-gray-200: #B4B4B4;     /* placeholder de inputs */
  --atv-bg: #FFFFFF;           /* fondo de página */
  --atv-bg-soft: #F5F5F5;      /* secciones suaves, media placeholder */
  --atv-bg-softer: #FAFAFA;    /* filas alternas, cajas neutras */

  /* ---------- Bordes (sobre blanco) ---------- */
  --atv-line: rgba(17,17,17,.10);   /* borde estándar */
  --atv-line-soft: rgba(17,17,17,.08);
  --atv-line-strong: rgba(17,17,17,.16); /* borde de inputs */
  --atv-line-on-dark: rgba(255,255,255,.12);

  /* ---------- Estados semánticos ---------- */
  --atv-success: #2E9E4F;
  --atv-success-ink: #1E7A3C;
  --atv-success-soft: rgba(46,158,79,.08);
  --atv-success-border: rgba(46,158,79,.30);
  --atv-error: var(--atv-red);
  --atv-error-ink: #B01820;
  --atv-error-soft: rgba(216,28,36,.06);
  --atv-error-border: rgba(216,28,36,.30);
  --atv-whatsapp: #25D366;

  /* ---------- Texto sobre negro ---------- */
  --atv-on-dark: rgba(255,255,255,.78);
  --atv-on-dark-2: rgba(255,255,255,.70);
  --atv-on-dark-soft: rgba(255,255,255,.55);

  /* ---------- Tipografía ---------- */
  --atv-font-title: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --atv-font-body: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Escala tipográfica (fluida donde aplica) */
  --atv-fs-display: clamp(40px, 6.5vw, 68px); /* H1 hero home */
  --atv-fs-h1: clamp(30px, 4vw, 44px);        /* H1 páginas / ficha */
  --atv-fs-h2: clamp(26px, 4vw, 40px);        /* títulos de sección */
  --atv-fs-h3: 21px;                          /* subtítulos / cards */
  --atv-fs-lead: clamp(15px, 2vw, 18px);      /* bajada de hero */
  --atv-fs-body: 15px;                        /* cuerpo */
  --atv-fs-sm: 14px;                          /* cuerpo pequeño */
  --atv-fs-xs: 12.5px;                        /* microcopy */
  --atv-fs-eyebrow: 12px;                     /* antetítulo (uppercase) */

  --atv-lh-tight: 1.05;
  --atv-lh-snug: 1.3;
  --atv-lh-body: 1.7;
  --atv-track-eyebrow: 4px;   /* letter-spacing antetítulos */
  --atv-track-label: 2px;     /* letter-spacing labels footer */

  /* ---------- Spacing (múltiplos de 4) ---------- */
  --atv-space-1: 4px;
  --atv-space-2: 8px;
  --atv-space-3: 12px;
  --atv-space-4: 16px;
  --atv-space-5: 20px;
  --atv-space-6: 24px;
  --atv-space-8: 32px;
  --atv-space-10: 40px;
  --atv-space-14: 56px;
  --atv-space-16: 64px;
  --atv-section-y: clamp(40px, 6vw, 72px);  /* separación vertical de secciones */
  --atv-container: 1240px;                  /* ancho máximo de contenido */
  --atv-gutter: 20px;                       /* padding lateral del container */

  /* ---------- Radios ---------- */
  --atv-r-sm: 12px;
  --atv-r-md: 14px;
  --atv-r-lg: 16px;
  --atv-r-xl: 18px;
  --atv-r-2xl: 22px;
  --atv-r-3xl: 24px;
  --atv-r-pill: 999px;

  /* ---------- Sombras ---------- */
  --atv-shadow-sm: 0 4px 14px rgba(17,17,17,.12);
  --atv-shadow-card: 0 18px 34px rgba(17,17,17,.14);
  --atv-shadow-card-lg: 0 20px 38px rgba(17,17,17,.16);
  --atv-shadow-cta: 0 10px 26px rgba(216,28,36,.28);
  --atv-shadow-cta-strong: 0 10px 26px rgba(216,28,36,.32);

  /* ---------- Transiciones ---------- */
  --atv-t-fast: .18s ease;
  --atv-t: .2s ease;
  --atv-t-slow: .3s ease;

  /* ---------- Foco accesible (WCAG) ---------- */
  --atv-focus-ring: 0 0 0 3px rgba(216,28,36,.35);

  /* ---------- Alturas mínimas de target táctil (>=44px) ---------- */
  --atv-tap: 44px;
  --atv-z-header: 40;
  --atv-z-fab: 60;
}

/* Breakpoints de referencia (documentación; usar en media queries):
   móvil   < 768px
   tablet  768–1024px
   desktop > 1024px
*/