/* GWS Design System — tokens
   Fuente única de verdad para color, tipografía y tokens de componente.
   Ver design system de referencia (GWS · Design System). */
:root {
  /* ---- Colores principales ---- */
  --gws-cream-100: #F8EDD0;   /* fondos claros, texto sobre oscuro */
  --gws-cream-200: #EBD9A2;   /* hover de enlaces en menú */
  --gws-orange-300: #FF8A50;  /* hover botón primario */
  --gws-orange-500: #F95D2D;  /* acción principal · botón primario */
  --gws-brick-700: #993426;   /* acento profundo · botón secundario */
  --gws-amber-400: #F9BB5A;   /* destacados y etiquetas */

  /* ---- Colores secundarios ---- */
  --gws-green: #75AD5E;
  --gws-gray: #9F9F9F;        /* placeholder e info secundaria */
  --gws-black: #030302;       /* texto principal y fondos oscuros */

  /* ---- Superficies derivadas (lienzos amplios) ---- */
  --gws-paper: #FCF8EE;
  --gws-paper-line: #E6DCC2;
  --gws-ink: #1A1613;

  /* ---- Semánticos (solo color de texto) ---- */
  --gws-error: var(--gws-brick-700);
  --gws-warning: var(--gws-amber-400);
  --gws-success: var(--gws-green);
  --gws-info: var(--gws-gray);

  /* ---- Tipografía ---- */
  --gws-font-base: 'Raleway', system-ui, sans-serif;     /* uso general */
  --gws-font-accent: 'Vollkorn', serif;                  /* italic: categorías, nombres de producto */
  --gws-font-numeric: 'Open Sans', sans-serif;           /* precios, cantidades, conteos */
  --gws-weight-body: 400;
  --gws-weight-medium: 500;
  --gws-weight-button: 600;
  --gws-weight-title: 700;

  /* ---- Tokens de componente ---- */
  --gws-btn-tracking: 0.08em; /* tracking 80 */
  --gws-hairline: 1px;        /* línea de 1pt */
  --gws-radius: 0;            /* esquinas en punta */
  --gws-maxw: 1120px;
}

/* ============ Componentes base: botones ============ */
/* Referencia CSS del design system para contextos sin React (HTML estático).
   En la app React el botón canónico es el componente <Button> (components/UI.tsx),
   cuyas variantes token-driven reflejan estas mismas reglas. Mantener ambos en sync. */
.gws-btn {
  font-family: var(--gws-font-base);
  font-weight: var(--gws-weight-button);
  letter-spacing: var(--gws-btn-tracking);
  font-size: 14px;
  border-radius: var(--gws-radius);
  cursor: pointer;
  padding: 14px 30px;
  border: var(--gws-hairline) solid transparent;
  transition: background .2s, color .2s, border-color .2s;
  text-decoration: none;
  display: inline-block;
}

.gws-btn--primary {
  background: var(--gws-orange-500);
  color: #fff;
  border-color: var(--gws-orange-500);
}
.gws-btn--primary:hover,
.gws-btn--primary:focus-visible {
  background: var(--gws-orange-300);
  border-color: var(--gws-orange-300);
  outline: none;
}

.gws-btn--secondary {
  background: transparent;
  color: var(--gws-brick-700);
  padding: 8px 4px;
  border: none;
  border-bottom: var(--gws-hairline) solid var(--gws-brick-700);
}
.gws-btn--secondary:hover,
.gws-btn--secondary:focus-visible {
  color: var(--gws-orange-500);
  border-bottom-color: var(--gws-orange-500);
  outline: none;
}