/* =========================================================
   Design tokens — Marketplace Dashboard with AI Integrations
   Extraídos de la captura de referencia por muestreo de píxeles.
   Los valores marcados "estimado" se corrigen por compresión.
   ========================================================= */

:root {
  /* ---------- Superficies oscuras (dashboard) ---------- */
  --color-nav-bg: #042326;
  --color-panel-bg: #062225;
  --color-header-bg: #193135;
  --color-metric-card-bg: #2c4144;
  --color-icon-circle-bg: #475c5d;
  --color-tooltip-bg: #042326;

  /* ---------- Superficies claras ---------- */
  --color-page-bg: #e8edf3;
  --color-card-bg: #ffffff;
  --color-card-header-bg: #f1f5f6;
  --color-row-hover-bg: #f1f5f6;
  --color-sub-card-bg: #f9fafc;
  --color-chart-area-fill: #eaf6f2;
  --color-axis-badge-bg: #f7f7f7;
  --color-border: #dde3ea; /* estimado */
  --color-grid-line: #f1f1f1;

  /* ---------- Texto ---------- */
  --color-text-hero: #2d3e50;
  --color-text-body-muted: #798088;
  --color-text-feature: #3b434e;
  --color-text-dark: #1f2f2f;
  --color-text-table: #3d3d3d;
  --color-text-table-head: #2c2c2c;
  --color-text-on-dark: #f5ffff;
  --color-text-on-dark-muted: #a4b9bc;
  --color-text-on-dark-faint: #516669;
  --color-text-axis: #adadad;

  /* ---------- Acentos ---------- */
  --color-accent-mint: #c7f8e5;
  --color-accent-green: #4fb286; /* estimado */
  --color-accent-orange: #e9a13b; /* estimado */
  --color-accent-red: #c0392b; /* estimado */

  /* ---------- Tipografía ---------- */
  --font-display: "Manrope", "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --font-ui: "Inter", "Manrope", system-ui, sans-serif;

  --text-hero: 44px;
  --text-greeting: 24px;
  --text-kpi: 24px;
  --text-feature: 18px;
  --text-body: 16px;
  --text-sub-kpi: 16px;
  --text-card-title: 15px;
  --text-nav: 13px;
  --text-table: 13px;
  --text-label: 12px;
  --text-caption: 11px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.1;
  --leading-snug: 1.2;
  --leading-normal: 1.3;
  --leading-relaxed: 1.55;

  --tracking-hero: -0.02em;
  --tracking-heading: -0.01em;

  /* ---------- Radios ---------- */
  --radius-panel: 16px;
  --radius-card: 12px;
  --radius-sub-card: 8px;
  --radius-tooltip: 6px;
  --radius-thumb: 6px;
  --radius-full: 999px;

  /* ---------- Espaciado y dimensiones ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  --panel-padding: 16px;
  --card-padding: 16px;
  --gap-kpi: 12px;
  --gap-cards: 16px;

  --nav-height: 48px;
  --table-row-height: 44px;
  --action-row-height: 36px;
  --icon-circle-size: 36px;
  --thumb-size: 24px;

  /* ---------- Gráfico ---------- */
  --chart-line-primary: #1f2f2f;
  --chart-line-secondary: var(--color-accent-orange);
  --chart-line-width: 1.5px;
  --chart-marker-size: 6px;
  --chart-reference-line: #adadad;
}