/* ============================================================
   The Good Shisha — Design tokens
   Fuente: README del handoff de Claude Design (hifi, valores finales).
   No añadir reglas de componente aquí: solo variables.
   ============================================================ */
:root{
  /* --- negros / superficies oscuras --- */
  --tgs-ink:#0c0c0e;          /* negro base: cabecera, footer, botones, texto */
  --tgs-ink-hover:#1e1e23;    /* hover de los botones negros */
  --tgs-black-2:#131316;      /* barra de navegación secundaria */
  --tgs-black-3:#1a1a1f;      /* inputs oscuros */
  --tgs-bd-dark:#26262b;
  --tgs-bd-dark-2:#2c2c33;
  --tgs-bd-dark-3:#34343c;

  /* --- superficies claras --- */
  --tgs-bg:#f6f6f5;           /* fondo de página */
  --tgs-card:#ffffff;
  --tgs-card-bd:#e8e8e6;
  --tgs-bd-input:#e0e0de;
  --tgs-sep:#ececea;
  --tgs-sep-2:#f0f0ee;

  /* --- texto sobre claro --- */
  --tgs-text:#0c0c0e;
  --tgs-text-body:#5a5a5a;
  --tgs-text-meta:#8b8b8b;
  --tgs-text-disabled:#b0b0ae;
  --tgs-disabled-bg:#d4d4d0;  /* fondo de botón deshabilitado */

  /* Color del anillo de foco de teclado. Es CONTEXTUAL: los envoltorios
     oscuros (cabecera, footer, drawer, modales --dark, puerta +18) lo
     redeclaran a #fff, porque el negro sobre negro no se ve. */
  --tgs-focus:var(--tgs-ink);

  /* --- texto sobre negro --- */
  --tgs-on-dark:#e4e4e7;
  --tgs-on-dark-2:#c9c9d1;
  --tgs-on-dark-3:#a0a0a8;
  --tgs-on-dark-meta:#8b8b92;
  --tgs-on-dark-legal:#6b6b74;

  /* --- semánticos --- */
  --tgs-green:#22c55e;        /* stock, envío gratis, contador carrito */
  --tgs-green-text:#15803d;
  --tgs-green-bg:#e8f7ee;
  --tgs-red:#dc2626;          /* badge de oferta */
  --tgs-red-on-dark:#f87171;  /* rojo aclarado para leer sobre negro (OFERTAS, TGS LIVE) */
  --tgs-amber-text:#b45309;   /* estado "en camino" / aviso promo carbón */
  --tgs-amber-bg:#fef3c7;
  --tgs-danger-bg:#fee2e2;
  --tgs-danger-bg-soft:#fef2f2;

  /* --- pasarelas --- */
  --tgs-sequra:#5b4bc4;
  --tgs-sequra-bg:#f0edff;
  --tgs-redsys:#0f766e;
  --tgs-redsys-bg:#f0f9f6;

  /* --- degradados cromo --- */
  --tgs-chrome-text:linear-gradient(180deg,#ffffff 10%,#b7bcc4 45%,#f2f3f5 52%,#8b909a 90%);
  --tgs-chrome-btn:linear-gradient(180deg,#ffffff,#c9cdd4 55%,#eceef1);
  --tgs-topbar:linear-gradient(90deg,#1c1c20,#2a2a30,#1c1c20);

  /* --- tipografía --- */
  --tgs-font:'Archivo',system-ui,-apple-system,"Segoe UI",sans-serif;

  /* --- espaciado lateral --- */
  --tgs-pad:18px;             /* móvil */
  --tgs-pad-desk:36px;        /* escritorio */

  /* --- radios --- */
  --tgs-r-card:18px;
  --tgs-r-card-desk:20px;
  --tgs-r-screen:22px;
  --tgs-r-modal:26px;
  --tgs-r-input:12px;
  --tgs-r-pill:999px;

  /* --- sombras --- */
  --tgs-shadow-card-hover:0 16px 36px rgba(0,0,0,0.1);
  --tgs-shadow-modal:0 30px 80px rgba(0,0,0,0.55);
  --tgs-shadow-toast:0 12px 30px rgba(0,0,0,0.35);

  /* --- breakpoint de escritorio (referencia; los @media usan el literal) --- */
  --tgs-bp-desk:980px;
}