:root {
  --font-sans: "Manrope", "Segoe UI", Arial, sans-serif;
  --red: #e1251b;
  --red-dark: #bd1e16;
  --red-soft: rgba(225,37,27,.1);
  --ink: #111214;
  --ink-rgb: 17,18,20;
  --ink-soft: #24262a;
  --gray-950: #18191c;
  --gray-800: #34373c;
  --gray-700: #545960;
  --gray-600: #6d737b;
  --gray-500: #858b93;
  --gray-400: #a9aeb5;
  --gray-300: #cfd3d8;
  --gray-250: #d9dde1;
  --gray-200: #e4e7ea;
  --gray-150: #eceef0;
  --gray-100: #f3f4f5;
  --gray-75: #f7f7f8;
  --gray-50: #fafafa;
  --white: #fff;
  --green: #16794b;
  --amber: #9a6500;
  --danger: #b42318;
  --danger-rgb: 180,35,24;
  --page-bg: #f5f6f7;
  --surface: #fff;
  --surface-soft: #fafafa;
  --surface-alt: var(--gray-75);
  --border: #dde0e4;
  --border-strong: #cfd3d8;
  --text: var(--ink);
  --muted: #6f757d;

  /* Estados (fondo suave + texto) reutilizados por pills/tablas/status cards */
  --ok-bg: #edf8f2;
  --ok-text: var(--green);
  --warn-bg: #fff8e8;
  --warn-text: var(--amber);
  --alert-bg: #fff0ef;
  --alert-text: var(--danger);

  /* Escala oscura secundaria, solo para el widget "Top Paid Social" */
  --hero-bg: var(--ink);
  --hero-surface: #2c2e32;
  --hero-surface-alt: #34363a;
  --hero-border: #45474a;
  --hero-text: #fff;
  --hero-muted: #aeb2b7;
  --hero-subtle: #8d9299;

  /* Fuente única de verdad para colores de gráficas (leída también desde JS vía charts-theme.js). */
  --chart-total: var(--ink);
  --chart-organico: var(--gray-500);
  --chart-pauta: var(--red);
  --chart-sin: var(--gray-300);
  --chart-grid: var(--gray-150);
  --chart-axis: var(--gray-250);

  --radius-xs: 5px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow-soft: 0 12px 36px rgba(17,18,20,.06);
  --shadow-modal: 0 24px 70px rgba(17,18,20,.16);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --header-h: 56px;
  --content-max: 1440px;
  --content-pad: clamp(18px, 2vw, 32px);
}