/*
 * Design tokens de Statement.
 * Traduccion literal de next-reference/src/app/globals.css + las clases Tailwind
 * efectivamente usadas en los componentes. Los tokens huerfanos del Next
 * (--color-accent #E07A2F y --color-muted #888888) NO se replican: estan
 * declarados en el Next pero ningun componente los usa.
 */

:root {
  /* Base */
  --stmnt-bg: #ffffff;
  --stmnt-fg: #000000;
  --stmnt-sale: #dc2626; /* red-600: badge -20% y avisos de stock */
  --stmnt-placeholder: #f5f5f5; /* neutral-100: fondo de imagen sin cargar */
  --stmnt-placeholder-200: #e5e5e5;
  --stmnt-placeholder-400: #a3a3a3;

  /* Jerarquia de texto (negro con alfa) */
  --stmnt-fg-80: rgba(0, 0, 0, 0.8);
  --stmnt-fg-70: rgba(0, 0, 0, 0.7);
  --stmnt-fg-60: rgba(0, 0, 0, 0.6);
  --stmnt-fg-50: rgba(0, 0, 0, 0.5);
  --stmnt-fg-40: rgba(0, 0, 0, 0.4);
  --stmnt-fg-30: rgba(0, 0, 0, 0.3);
  --stmnt-fg-25: rgba(0, 0, 0, 0.25);

  /* Bordes */
  --stmnt-line: rgba(0, 0, 0, 0.1); /* borde canonico */
  --stmnt-line-20: rgba(0, 0, 0, 0.2);
  --stmnt-line-05: rgba(0, 0, 0, 0.05);

  /* Sobre imagen */
  --stmnt-on-img-90: rgba(255, 255, 255, 0.9);
  --stmnt-on-img-70: rgba(255, 255, 255, 0.7);
  --stmnt-on-img-60: rgba(255, 255, 255, 0.6);
  --stmnt-on-img-50: rgba(255, 255, 255, 0.5);
  --stmnt-on-img-line: rgba(255, 255, 255, 0.3);

  /* Tipografia */
  --stmnt-font: "Aeonik", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --stmnt-weight-regular: 400;
  --stmnt-weight-medium: 500;
  --stmnt-weight-bold: 700;

  /* Layout: no hay container global, el sitio es full-bleed con gutter */
  --stmnt-gutter: 24px; /* px-6 */
  --stmnt-gutter-md: 40px; /* md:px-10 */

  /* Movimiento */
  --stmnt-transition: 300ms;
  --stmnt-slider-transition: 1100ms;
  --stmnt-slider-ease: cubic-bezier(0.65, 0, 0.35, 1);

  /* Z-index en uso en el Next */
  --stmnt-z-content: 10;
  --stmnt-z-menu-backdrop: 20;
  --stmnt-z-header: 30;
  --stmnt-z-drawer-backdrop: 40;
  --stmnt-z-drawer: 50;
  --stmnt-z-popup: 120;
}

/*
 * Aeonik — pesos 400 / 500 / 700.
 *
 * Son los unicos tres que el Next usa realmente en markup: de los 12 .otf que
 * carga (100/300/400/500/700/900 y sus italicas), nueve no los toca ningun
 * componente. Convertidos con woff2_compress desde los originales de
 * next-reference/src/app/fonts/: 360 KB de .otf pasan a 132 KB de .woff2.
 *
 * Aeonik es fuente comercial de CoType Foundry. Licencia webfont confirmada.
 */
@font-face {
  font-family: "Aeonik";
  src: url("../fonts/Aeonik-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aeonik";
  src: url("../fonts/Aeonik-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aeonik";
  src: url("../fonts/Aeonik-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}