/* ============================================================
   CITZIA — Tokens de marca (identidad REAL del cliente)
   ÚNICA fuente de verdad del diseño. Ningún color se hardcodea
   fuera de este archivo.

   Colores extraídos por análisis de píxeles de:
   · logo LEOCITZIA  → negro tinta #36363C · amarillo suave #FCF084
   · flyer "Imprenta y Librería" → amarillo dorado #F0C840 · negro #282828
   ============================================================ */
:root {
  /* — Marca — */
  --brand:            #2E2E33;  /* negro tinta de la mancha, color principal */
  --brand-dark:       #1C1C20;
  --brand-light:      #4A4A52;
  --brand-soft:       #EDEDF0;
  --accent:           #F0C840;  /* amarillo dorado del flyer, CTAs y precios */
  --accent-dark:      #D4A81E;
  --accent-light:     #FCF084;  /* amarillo suave del logo */
  --accent-soft:      #FEF9DC;

  /* — Superficies — */
  --bg:               #FAFAFA;
  --surface:          #FFFFFF;
  --surface-2:        #F2F2F4;
  --border:           #E4E4E8;
  --border-strong:    #CFCFD6;

  /* — Texto — */
  --text:             #22222A;
  --text-soft:        #5C5C66;
  --text-mute:        #8E8E99;
  --text-on-brand:    #FFFFFF;
  --text-on-accent:   #2E2410;  /* sobre amarillo: texto oscuro, nunca blanco */

  /* — Semánticos — */
  --ok:               #2E9E63;
  --ok-soft:          #E7F5EE;
  --warn:             #D49A1E;
  --warn-soft:        #FDF4E0;
  --err:              #D34B44;
  --err-soft:         #FBEBEA;
  --info:             #3B72C4;

  /* — Rubros (catálogo unificado) —
     La marca es monocromo + amarillo, así que los rubros se distinguen
     por intensidad, no por colores ajenos a la identidad. */
  /* Velo sobre la foto del hero: lo usan la barra superior y el disco de cada
     botón de rubro, para que se oscurezcan igual sin dejar de ser transparentes. */
  --velo-hero:        rgba(16,16,20,.32);

  --libreria:         #2E2E33;
  --imprenta:         #D4A81E;
  --imprenta-soft:    #FEF9DC;

  /* — Tipografía —
     Titulares condensados en caja alta, como el "LEOCITZIA" del logo. */
  /* Tipografía: Manrope, la misma que usa dpmsa.com.ar (allá va renombrada "Manrope3").
     Archivo Black queda reservada al wordmark de la portada y el logo. */
  --ff-title: 'Manrope', system-ui, sans-serif;
  --ff-head:  'Manrope', system-ui, -apple-system, sans-serif;
  --ff-body:  'Manrope', system-ui, -apple-system, sans-serif;
  --fs-xs: 12px; --fs-sm: 14px; --fs-base: 15px;
  --fs-md: 17px; --fs-lg: 22px; --fs-xl: 27px; --fs-2xl: 34px;

  /* — Layout — */
  --radius:    10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --shadow:    0 1px 3px rgba(34,34,42,.08), 0 1px 2px rgba(34,34,42,.04);
  --shadow-md: 0 4px 14px rgba(34,34,42,.10);
  --shadow-lg: 0 12px 32px rgba(34,34,42,.18);
  --header-h:  64px;
  --maxw:      1360px;

  /* — Grid de catálogo —
     Estándar BPSG: compacto pero full-width. NUNCA zoom/transform:scale
     global para achicar (da efecto "alejado"). Cards de ancho fijo. */
  --card-min:  216px;
  --card-gap:  14px;
}