/* ============================================================
   Bolsillo Lleno — Design Tokens
   Fuente de verdad visual del sitio. Todo el CSS de componentes
   (styles.css) consume estas variables; no se deben repetir
   valores hex sueltos fuera de este archivo.
   ============================================================ */

:root {
  /* Color — marca */
  --color-bg: #f8ecdb;               /* crema — fondo base del sitio */
  --color-bg-elevated: #fffaf1;      /* crema claro — secciones alternas */
  --color-surface: #ffffff;          /* superficie de tarjetas */
  --color-text: #1c2620;             /* tinta — texto de cuerpo */
  --color-text-muted: #55635a;       /* texto secundario */

  --color-accent: #11734c;           /* verde institucional — acción principal */
  --color-accent-strong: #0b4a30;    /* verde profundo — hover / secciones de alto contraste */
  --color-accent-active: #083a26;    /* verde activo (click) */
  --color-accent-soft: #e2efe4;      /* verde suave — fondos de insignias */
  --color-on-accent: #f8ecdb;        /* texto sobre fondos verdes */

  --color-gold: #9c6c1f;             /* dorado — uso restringido: bonos, garantía, escasez */
  --color-gold-soft: #f6e3c2;        /* fondo de etiquetas doradas */

  --color-page-1: #efe2c8;           /* efecto "páginas apiladas" de las cajas de producto */
  --color-page-2: #e6d5b3;

  --color-border: rgba(17, 115, 76, 0.16);
  --color-border-strong: rgba(17, 115, 76, 0.3);

  /* Sombra */
  --shadow-card: 0 1px 2px rgba(11, 74, 48, 0.06), 0 10px 26px rgba(11, 74, 48, 0.08);
  --shadow-lift: 0 14px 34px rgba(11, 74, 48, 0.16);

  /* Tipografía */
  --font-ui: "Roboto", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --fs-h1: clamp(2.4rem, 5.4vw, 3.75rem);
  --fs-h2: clamp(1.9rem, 4vw, 2.5rem);
  --fs-h3: 1.6rem;
  --fs-h4: 1.15rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  --lh-tight: 1.08;
  --lh-heading: 1.2;
  --lh-body: 1.65;

  /* Espaciado */
  --space-section: clamp(64px, 9vw, 112px);
  --space-section-tight: clamp(48px, 6vw, 72px);
  --content-max: 1120px;
  --gutter: clamp(20px, 5vw, 48px);

  /* Radios */
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
}