/* ============================================================================
   PORTAL RANCHERAS - DESIGN TOKENS
   ----------------------------------------------------------------------------
   Punto ÚNICO de configuración visual del sistema (ver doc 07 - DISEÑO UI/UX).
   Ningún componente debe definir valores visuales propios: todos consumen
   estas variables. Para cambiar la identidad del portal se modifica SOLO
   este archivo.

   Migración a Razor: este archivo se copia tal cual a
   PortalRancheras.Web/Content/css/tokens.css
   ============================================================================ */

:root {

  /* --------------------------------------------------------------
     COLORES DE MARCA
     Paleta cálida inspirada en la fiesta ranchera chilena:
     rojo ranchero + dorado fiesta + verde campo sobre fondos crema.
     -------------------------------------------------------------- */
  --pr-primary:          #A6212C;   /* rojo ranchero */
  --pr-primary-hover:    #8A1B25;
   --pr-primary-contrast: #7C151A;   /* contraste adicional para microtexto y estados */
  --pr-primary-soft:     #F8E7E8;   /* fondo suave para badges/estados */
  --pr-on-primary:       #FFFFFF;

  --pr-secondary:        #E09F3E;   /* dorado fiesta */
  --pr-secondary-hover:  #C9892E;
  --pr-secondary-soft:   #FBEFDA;
  --pr-on-secondary:     #3A2A10;

  --pr-accent:           #3A6B35;   /* verde campo */
  --pr-accent-hover:     #2E5629;
  --pr-accent-soft:      #E6EFE4;
  --pr-on-accent:        #FFFFFF;

  /* --------------------------------------------------------------
     COLORES DE ESTADO
     -------------------------------------------------------------- */
  --pr-success:          #2E7D32;
  --pr-success-soft:     #E3F0E4;
  --pr-warning:          #A96B00;
  --pr-warning-soft:     #FCF1DC;
  --pr-danger:           #C0392B;
  --pr-danger-soft:      #F9E6E3;
  --pr-info:             #1F6E8C;
  --pr-info-soft:        #E2EFF4;

  /* --------------------------------------------------------------
     NEUTROS CÁLIDOS: fondos, superficies, texto y bordes
     -------------------------------------------------------------- */
  --pr-bg:               #FBF6EE;   /* fondo general del portal (crema) */
  --pr-surface:          #FFFFFF;   /* tarjetas y superficies elevadas */
  --pr-surface-alt:      #F4EBDD;   /* franjas alternas de secciones */
  --pr-dark:             #2C2018;   /* footer, header de banda, fondos oscuros */
  --pr-dark-soft:        #4A3A2E;

   --pr-text:             #33271F;   /* texto principal */
   --pr-text-2:           #53443A;   /* texto secundario — oscurecido para mejor contraste en microtexto */
  --pr-text-3:           #75675C;   /* texto auxiliar: contraste AA */
  --pr-text-inverse:     #FBF6EE;   /* texto sobre fondos oscuros */

  --pr-white:            #FFFFFF;
  --pr-focus:            #A6212C;
  --pr-hero-start:       #55251E;
  --pr-hero-accent:      #7A1620;
  --pr-accent-dark:      #2A4E26;
  --pr-event-dark:       #8A5A10;
  --pr-news-dark:        #3F5062;
  --pr-overlay-light:    rgba(255, 255, 255, 0.85);
  --pr-overlay-soft:     rgba(255, 255, 255, 0.15);

  --pr-border:           #E7DCCA;
  --pr-border-strong:    #D3C4AC;

  /* --------------------------------------------------------------
     TIPOGRAFÍA
     Display para titulares (afiche de festival) + lectura cálida.
     -------------------------------------------------------------- */
  --pr-font-display:     'Archivo Black', 'Arial Black', sans-serif;
  --pr-font-body:        'Nunito Sans', 'Segoe UI', Tahoma, sans-serif;

  /* Escala tipográfica (Mobile First: clamp escala hacia desktop) */
  --pr-fs-hero:          clamp(2rem, 5.5vw, 3.25rem);
  --pr-fs-h1:            clamp(1.7rem, 4.5vw, 2.5rem);
  --pr-fs-h2:            clamp(1.4rem, 3.5vw, 1.9rem);
  --pr-fs-h3:            clamp(1.15rem, 2.5vw, 1.4rem);
  --pr-fs-h4:            1.1rem;
  --pr-fs-body:          1rem;
  --pr-fs-secondary:     0.9375rem;
  --pr-fs-aux:           0.875rem;
  --pr-fs-label:         0.8125rem;
  --pr-lh-title:         1.15;
  --pr-lh-body:          1.6;

  /* --------------------------------------------------------------
     ESPACIADO (escala única para márgenes y paddings)
     -------------------------------------------------------------- */
  --pr-sp-1:             0.25rem;   /*  4px */
  --pr-sp-2:             0.5rem;    /*  8px */
  --pr-sp-3:             0.75rem;   /* 12px */
  --pr-sp-4:             1rem;      /* 16px */
  --pr-sp-5:             1.5rem;    /* 24px */
  --pr-sp-6:             2rem;      /* 32px */
  --pr-sp-7:             3rem;      /* 48px */
  --pr-sp-8:             4rem;      /* 64px */
  --pr-sp-9:             6rem;      /* 96px */

  /* --------------------------------------------------------------
     BORDES Y RADIOS
     -------------------------------------------------------------- */
  --pr-radius-sm:        6px;       /* inputs, badges */
  --pr-radius:           12px;      /* cards, alertas */
  --pr-radius-lg:        20px;      /* hero, modales, bloques grandes */
  --pr-radius-pill:      999px;     /* botones pill, chips */

  /* --------------------------------------------------------------
     SOMBRAS (niveles de elevación; tinte cálido, nunca decorativas)
     -------------------------------------------------------------- */
  --pr-shadow-sm:        0 1px 3px rgba(60, 42, 22, 0.10);
  --pr-shadow:           0 4px 14px rgba(60, 42, 22, 0.12);
  --pr-shadow-lg:        0 12px 32px rgba(60, 42, 22, 0.18);

  /* --------------------------------------------------------------
     Z-INDEX
     -------------------------------------------------------------- */
  --pr-z-header:         1030;
  --pr-z-dropdown:       1040;
  --pr-z-offcanvas:      1045;
  --pr-z-modal:          1055;
  --pr-z-toast:          1080;

  /* --------------------------------------------------------------
     CONTENEDORES
     -------------------------------------------------------------- */
  --pr-container:        1200px;    /* contenedor general */
  --pr-container-wide:   1400px;    /* contenedor ancho (calendario, home) */
  --pr-container-narrow: 720px;     /* formularios, artículos */

  /* Dimensiones compartidas */
  --pr-header-height:     64px;
  --pr-header-band-height: 60px;
  --pr-icon-touch:        44px;

  /* --------------------------------------------------------------
     TRANSICIONES
     -------------------------------------------------------------- */
  --pr-t-fast:           0.15s ease;
  --pr-t-base:           0.25s ease;
}

/* ----------------------------------------------------------------
   BREAKPOINTS DE REFERENCIA (coinciden con Bootstrap 5)
   No son variables CSS porque las media queries no las soportan.
     sm:  576px   md:  768px   lg:  992px   xl: 1200px   xxl: 1400px
   Mobile First: los estilos base son móviles; las media queries
   siempre amplían hacia arriba (min-width).
   ---------------------------------------------------------------- */