/* ============================================================
   variables.css — Design tokens globales
   Todos los valores de diseño se definen aquí.
   Nunca usar valores hardcoded en otros archivos CSS.
   ============================================================ */

:root {

  /* ── Colores de marca ── */
  --color-navy:        #233977;
  --color-orange:      #EA5A22;
  --color-white:       #FFFFFF;

  /* ── Escala de grises ── */
  --color-black:       #1A1A2E;
  --color-gray-dark:   #2D3142;
  --color-gray-mid:    #5C6275;
  --color-gray-soft:   #9098A9;
  --color-gray-line:   #E0E2E8;
  --color-gray-bg:     #F6F7F9;

  /* ── Tipografía ── */
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body:    'Barlow', sans-serif;

  /* Escala tipográfica — mínimo absoluto 11px (0.6875rem) */
  --text-11:  0.6875rem;   /* 11px — notas al pie, paginación  */
  --text-13:  0.8125rem;   /* 13px — etiquetas, refs de pulg.  */
  --text-16:  1.0000rem;   /* 16px — cuerpo, tablas            */
  --text-21:  1.3125rem;   /* 21px — subtítulos                */
  --text-27:  1.6875rem;   /* 27px — títulos de sección        */
  --text-34:  2.1250rem;   /* 34px — nombre del producto       */

  /* ── Espaciado ── */
  --space-xs:   8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  64px;

  /* ── Bordes ── */
  --border-strong: 1.5px solid var(--color-black);
  --border-soft:   1px solid var(--color-gray-line);

  /* ── Layout responsivo ── */
  --page-max-w:  900px;   /* ancho máximo en pantallas grandes */
  --page-pad-h:  32px;    /* padding horizontal                */
  --page-pad-v:  20px;    /* padding vertical entre secciones  */

  /* ── Sombra ── */
  --shadow-page: 0 4px 24px rgba(0, 0, 0, 0.12);

  /* ── Transiciones ── */
  --transition-fast: 150ms ease;
}