/* VDG color tokens. Brand anchors come from the seal: #336699 (Valor blue) and #669933 (Gestión green). */
:root{
  /* Valor blue — primary, from the V of the seal */
  --blue-50:#F3F6FA;--blue-100:#E3EBF4;--blue-200:#C5D5E8;--blue-300:#98B4D3;--blue-400:#6589B6;--blue-500:#336699;--blue-600:#2B5784;--blue-700:#23476C;--blue-800:#1C3855;--blue-900:#14283D;
  /* Gestión green — secondary, from the G of the seal */
  --green-50:#F5F8EF;--green-100:#E6EFD9;--green-200:#CDDFB4;--green-300:#A9C682;--green-400:#87AF56;--green-500:#669933;--green-600:#56822B;--green-700:#466A23;--green-800:#36521B;--green-900:#263A13;
  /* Slate — cool neutrals with a trace of blue */
  --slate-0:#FFFFFF;--slate-25:#FBFCFC;--slate-50:#F6F7F8;--slate-100:#EEF0F2;--slate-200:#E2E6E9;--slate-300:#CDD3D8;--slate-400:#A2ABB4;--slate-500:#76808B;--slate-600:#58626D;--slate-700:#404952;--slate-800:#2A3139;--slate-900:#1A1F25;
  /* Status */
  --amber-50:#FCF6EA;--amber-100:#F7E8C8;--amber-500:#C08A2E;--amber-700:#8A5F17;
  --red-50:#FBEFEE;--red-100:#F5D8D5;--red-500:#B8483F;--red-700:#8E3129;

  /* Semantic — text */
  --text-strong:var(--slate-900);
  --text-body:var(--slate-800);
  --text-muted:var(--slate-600);
  --text-subtle:var(--slate-500);
  --text-disabled:var(--slate-400);
  --text-on-brand:#FFFFFF;
  --text-link:var(--blue-600);
  --text-link-hover:var(--blue-800);

  /* Semantic — surfaces */
  --surface-page:var(--slate-25);
  --surface-card:#FFFFFF;
  --surface-sunken:var(--slate-50);
  --surface-hover:var(--slate-50);
  --surface-selected:var(--blue-50);
  --surface-inverse:var(--blue-900);
  --surface-overlay:rgba(20,40,61,.32);

  /* Semantic — borders */
  --border-subtle:var(--slate-100);
  --border-default:var(--slate-200);
  --border-strong:var(--slate-300);
  --border-focus:var(--blue-500);

  /* Semantic — brand + action */
  --brand-primary:var(--blue-500);
  --brand-secondary:var(--green-500);
  --action-primary:var(--blue-600);
  --action-primary-hover:var(--blue-700);
  --action-primary-press:var(--blue-800);
  --focus-ring:0 0 0 3px rgba(51,102,153,.28);

  /* Semantic — status (fg / bg / border) */
  --status-success-fg:var(--green-700);--status-success-bg:var(--green-50);--status-success-border:var(--green-200);--status-success-solid:var(--green-500);
  --status-warning-fg:var(--amber-700);--status-warning-bg:var(--amber-50);--status-warning-border:var(--amber-100);--status-warning-solid:var(--amber-500);
  --status-danger-fg:var(--red-700);--status-danger-bg:var(--red-50);--status-danger-border:var(--red-100);--status-danger-solid:var(--red-500);
  --status-info-fg:var(--blue-700);--status-info-bg:var(--blue-50);--status-info-border:var(--blue-100);--status-info-solid:var(--blue-500);
  --status-neutral-fg:var(--slate-700);--status-neutral-bg:var(--slate-100);--status-neutral-border:var(--slate-200);--status-neutral-solid:var(--slate-500);

  /* Data visualization — ordered; use in sequence */
  --chart-1:var(--blue-500);--chart-2:var(--green-500);--chart-3:var(--blue-300);--chart-4:var(--green-300);--chart-5:var(--amber-500);--chart-6:var(--slate-400);
}