/* =====================================================================
   AlojamientosRurales — Sistema de diseño (fuente única de verdad)
   ---------------------------------------------------------------------
   Define TODOS los tokens del portal público: paleta de marca, neutros,
   colores semánticos, tipografía, espaciado, radios, sombras, contenedores
   y transiciones.

   Cargar SIEMPRE el primero (antes que ar-layout.css). El resto de hojas
   (incluidas las legacy con muchos !important) consumen estos tokens a
   través de sus propios :root, redirigidos aquí. Cambiar una marca/medida
   en este archivo se propaga a todo el sitio.
   ===================================================================== */

:root {
    /* ---- Marca (verde lima canónico #79ad1a) ---------------------- */
    --ar-brand:          #79ad1a;   /* primario */
    --ar-brand-strong:   #6a9916;   /* hover botones */
    --ar-brand-dark:     #5c8413;   /* texto/acento sobre claro */
    --ar-brand-darker:   #406010;   /* máximo contraste sobre soft */
    --ar-brand-soft:     #f1f8e3;   /* fondo tinte suave */
    --ar-brand-soft-2:   #e5f1d8;   /* fondo tinte un punto más */
    --ar-brand-line:     #cfe2bd;   /* bordes sobre soft */
    --ar-brand-bright:   #8bc34a;   /* acento brillante SOLO sobre foto/oscuro */
    --ar-brand-rgb:        121, 173, 26;  /* lima canónico en rgb (para rgba()) */
    --ar-brand-bright-rgb: 139, 195, 74;  /* brillante en rgb (glows sobre foto) */

    /* ---- Neutros (familia gris-frío ya usada en el portal) -------- */
    --ar-ink:            #172331;   /* texto principal / titulares */
    --ar-ink-soft:       #344252;   /* texto secundario fuerte */
    --ar-body:           #3f4f5f;   /* cuerpo de texto */
    --ar-muted:          #607080;   /* texto atenuado / metadatos */
    --ar-muted-2:        #8493a2;   /* placeholders / iconos suaves */
    --ar-line:           #dce3eb;   /* bordes estándar */
    --ar-line-soft:      #edf1f4;   /* separadores suaves */
    --ar-surface:        #ffffff;   /* tarjetas / superficies */
    --ar-surface-soft:   #f8faf5;   /* superficie alterna */
    --ar-page:           #f4f6f2;   /* fondo de página */

    /* ---- Colores semánticos -------------------------------------- */
    --ar-success:        #4f6a34;   --ar-success-bg: #f1f8e9;  --ar-success-line: #cfe2bd;
    --ar-info:           #347487;   --ar-info-bg:    #eff9fb;  --ar-info-line:    #c5dce4;
    --ar-warning:        #e07918;   --ar-warning-bg: #fdf3e8;  --ar-warning-line: #f3d4ad;
    --ar-danger:         #c0392b;   --ar-danger-bg:  #fcefed;  --ar-danger-line:  #f0c4be;

    /* ---- Tipografía ---------------------------------------------- */
    --ar-font-sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --ar-text-xs:   0.8125rem;  /* 13px */
    --ar-text-sm:   0.875rem;   /* 14px */
    --ar-text-base: 1rem;       /* 16px */
    --ar-text-md:   1.0625rem;  /* 17px */
    --ar-text-lg:   1.1875rem;  /* 19px */
    --ar-text-xl:   1.4375rem;  /* 23px (título de card) */
    --ar-text-2xl:  1.75rem;    /* 28px */
    --ar-text-3xl:  2.25rem;    /* 36px */
    --ar-text-4xl:  2.75rem;    /* 44px (H1 hero) */

    --ar-leading-tight:  1.2;
    --ar-leading-snug:   1.35;
    --ar-leading-normal: 1.5;
    --ar-leading-relaxed:1.65;

    --ar-weight-normal:   400;
    --ar-weight-medium:   500;
    --ar-weight-semibold: 600;

    /* ---- Espaciado (escala base 4px) ----------------------------- */
    --ar-space-1:  0.25rem;  /* 4 */
    --ar-space-2:  0.5rem;   /* 8 */
    --ar-space-3:  0.75rem;  /* 12 */
    --ar-space-4:  1rem;     /* 16 */
    --ar-space-5:  1.25rem;  /* 20 */
    --ar-space-6:  1.5rem;   /* 24 */
    --ar-space-8:  2rem;     /* 32 */
    --ar-space-10: 2.5rem;   /* 40 */
    --ar-space-12: 3rem;     /* 48 */
    --ar-space-16: 4rem;     /* 64 */
    --ar-space-20: 5rem;     /* 80 */

    /* ---- Radios -------------------------------------------------- */
    --ar-radius-xs:  4px;
    --ar-radius-sm:  6px;
    --ar-radius-md:  10px;
    --ar-radius-lg:  16px;
    --ar-radius-xl:  22px;
    --ar-radius-pill: 999px;

    /* ---- Sombras ------------------------------------------------- */
    --ar-shadow-xs: 0 1px 2px rgba(20, 30, 40, .05);
    --ar-shadow-sm: 0 2px 6px rgba(20, 30, 40, .06);
    --ar-shadow-md: 0 8px 22px rgba(20, 30, 40, .08);
    --ar-shadow-lg: 0 18px 45px rgba(15, 30, 45, .14);

    /* ---- Contenedores y maquetación ------------------------------ */
    --ar-container:        1240px;
    --ar-container-narrow: 880px;
    --ar-gutter:           20px;

    /* ---- Transiciones / foco ------------------------------------- */
    --ar-transition:  160ms ease;
    --ar-transition-slow: 280ms ease;
    --ar-ring: 0 0 0 3px rgba(121, 173, 26, .35);
    --ar-focus: #ffbf47;   /* foco accesible de alto contraste (ámbar) */

    /* ---- Componentes: botones -----------------------------------
       El lima puro (#79ad1a) sobre blanco no alcanza contraste AA,
       así que las CTA con texto blanco usan brand-dark (mismo tono,
       más legible). Lima queda para acentos, bordes y rellenos claros. */
    --ar-btn-primary-bg:       var(--ar-brand-dark);
    --ar-btn-primary-bg-hover: var(--ar-brand-darker);
    --ar-btn-primary-fg:       #ffffff;
    --ar-btn-primary-line:     var(--ar-brand-dark);

    --ar-btn-soft-bg:          var(--ar-brand-soft);
    --ar-btn-soft-bg-hover:    var(--ar-brand-soft-2);
    --ar-btn-soft-fg:          var(--ar-brand-darker);
    --ar-btn-soft-line:        var(--ar-brand-line);

    --ar-btn-light-bg:         var(--ar-surface);
    --ar-btn-light-fg:         var(--ar-ink-soft);
    --ar-btn-light-line:       var(--ar-line);

    --ar-control-radius:       14px;   /* botones e inputs (valor dominante del portal) */
    --ar-control-min-h:        46px;

    /* ---- Componentes: chips / badges ----------------------------- */
    --ar-chip-bg:        var(--ar-surface);
    --ar-chip-bg-active: var(--ar-brand-soft);
    --ar-chip-fg:        var(--ar-ink-soft);
    --ar-chip-fg-active: var(--ar-brand-darker);
    --ar-chip-line:      var(--ar-line);
    --ar-chip-line-active: var(--ar-brand-line);
}