/**

 * Tokens — alineados a docs/tienda_marketplace/design/tokens.css

 *

 * Cromo fijo (fondo hueso + textos oscuros): NO lo modifica tenant-theme.js.

 * Por tenant solo se sobreescriben --color-primary, accent, danger, warning, etc.

 */



:root {

  /* Layout fijo para todas las paletas: fondo hueso, superficies claras, texto oscuro */

  --color-bg: #f4f1ea;

  --color-surface: #fffcf7;

  --color-surface-elevated: #faf7f0;

  --color-text: #1b2430;

  --color-text-muted: #5c6670;

  --color-border: #e0d9ce;



  --color-primary: #1f4e79;

  --color-primary-hover: #1b4266;

  --color-primary-muted: rgba(31, 78, 121, 0.14);

  --color-secondary: #5f6b7a;
  --color-secondary-hover: #4f6173;

  --color-accent: #c89b3c;

  --color-danger: #b63c3c;

  --color-success: #2d8a5c;

  --shadow-sm: 0 2px 10px rgba(26, 34, 44, 0.06);
  --color-topbar-start: #f5f1e8;
  --color-topbar-end: #e7edf6;
  --color-ribbon-tenant-start: #e9eef7;
  --color-ribbon-tenant-end: #fdfdfd;
  --color-ribbon-hero-start: #f9f6ef;
  --color-ribbon-hero-end: #e8f0fb;
  --color-ribbon-text: #233142;
  --color-ribbon-text-soft: rgba(35, 49, 66, 0.86);
  --color-ribbon-tenant-text: #1f2f46;
  --color-ribbon-tenant-text-soft: rgba(31, 47, 70, 0.86);
  --color-ribbon-hero-text: #233142;
  --color-ribbon-hero-text-soft: rgba(35, 49, 66, 0.86);



  --font-display: "Segoe UI", "Inter", system-ui, sans-serif;

  --font-body: "Segoe UI", "Inter", system-ui, sans-serif;

  --fs-xs: 0.75rem;

  --fs-sm: 0.875rem;

  --fs-base: 1rem;

  --fs-lg: 1.125rem;

  --fs-xl: 1.5rem;

  --fs-2xl: 2rem;



  --radius-sm: 6px;

  --radius-md: 10px;

  --radius-lg: 16px;

  --space-md: 1rem;

  --space-lg: 1.5rem;

  --space-xl: 2rem;



  color-scheme: only light;

}



/**

 * Tema oscuro opcional (no usado por defecto en base.html).

 * Mantiene contraste si en el futuro se expone data-theme="dark".

 */

html[data-theme="dark"] {

  --color-bg: #0f1419;

  --color-surface: #1a222c;

  --color-surface-elevated: #232d3a;

  --color-text: #e6edf3;

  --color-text-muted: #8b9cae;

  --color-border: #2d3845;

  --color-primary-muted: rgba(61, 154, 122, 0.15);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);

  color-scheme: dark;

}