/*
  Design tokens — Can Resort
  Fuente: can-resort-design-system.md (export real de Claude Design, "Resort Design System")
  No escribir valores de color/tipografía/spacing sueltos en el CSS — usar siempre estas variables (ver CONVENTIONS.md).
*/

:root {
  /* Color — confirmado en Claude Design */
  --color-fondo: #FCEEC8;       /* --Fondo: fondo de secciones de la Home */
  --color-boton-whatsapp: #2EBE5D; /* --Botones: exclusivo de CTAs que abren WhatsApp */
  --color-header: #FFFFFF;      /* --Header */
  --color-cta-secundario: #F48D30; /* --Resto_CTA: CTAs que no son de WhatsApp */

  /* Color — extensiones razonadas, no cerradas aún en Claude Design (ver checklist en can-resort-design-system.md) */
  --color-texto: #242424;       /* rgb(36,36,36), línea base del sitio actual */
  --color-texto-muted: #646464; /* rgb(100,100,100), línea base del sitio actual */
  --color-superficie: #FFFFFF;
  --color-fondo-suave: #FEF9EB;  /* crema muy claro: filas y tarjetas dentro de las FAQ (pedido por Kike) */  /* blanco, superficie de cards sobre el fondo crema */
  --color-borde: rgba(36, 36, 36, 0.08);
  --color-boton-whatsapp-hover: #27a550;
  --color-cta-secundario-hover: #dd7a1f;
  --color-negativo: #C8323C;    /* aspa roja en tablas comparativas del blog — razonada, no cerrada aún */

  /* Tipografía */
  --font-heading: "Urbanist", sans-serif;
  --font-body: -apple-system, "system-ui", "Segoe UI", Roboto, sans-serif;

  --h1-size: 40px;
  --h1-weight: 600;
  --h1-line-height: 1.23;
  --h1-letter-spacing: -0.025em;

  --h2-size: 33px;
  --h2-weight: 600;
  --h2-line-height: 1.03;
  --h2-letter-spacing: -0.003em;

  --h3-size: 24px;
  --h3-weight: 600;
  --h3-line-height: 1;
  --h3-letter-spacing: -0.04em;

  --h4-size: 24px;
  --h4-weight: 600;
  --h4-line-height: 1.28;
  --h4-letter-spacing: -0.04em;

  --p-size: 16px;
  --p-weight: 400;
  --p-line-height: 1.56;
  --p-letter-spacing: 0em;

  /* Espaciado */
  --space-section-gap: 48px;
  --space-widget-gap: 20px;

  /* Radios */
  --radius-none: 0px;
  --radius-sm: 6px;
  --radius-pill: 30px;
  --radius-image: 10px;

  /* Sombras */
  --shadow-image: 0 1px 10px rgba(0, 0, 0, 0.505);
  --shadow-cta-whatsapp: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-card: 0 2px 12px rgba(36, 36, 36, 0.1); /* razonada, no cerrada aún */

  /* Layout */
  --content-max-width: 1200px;
  --side-gutter: 20px;
}