/* Tokens 1:1 de 00_SYSTEM/design-system/DESIGN_SYSTEM.md — solo los valores confirmados (sin los 3 beige marcados ⚠️ como duda) */
:root{
  /* Primary — coral marca */
  --sll-primary-50:#FCEAEB;
  --sll-primary-100:#F9CCCF;
  --sll-primary-200:#F5ACB1;
  --sll-primary-300:#F29198;
  --sll-primary-400:#EF7881;
  --sll-primary-500:#EC5B66;
  --sll-primary-600:#B72631;
  --sll-primary-700:#8B1018;
  --sll-primary-800:#660B11;
  --sll-primary-900:#3F070B;

  /* Secundarias */
  --sll-blue-500:#878DE4;
  --sll-purple-500:#A892D3;
  --sll-green-500:#9EC552;
  --sll-orange-500:#FDB343;
  --sll-green-700:#607D2B;
  --sll-orange-700:#AF6A01;

  /* Texto */
  --sll-copy-default:#5B596A;
  --sll-copy-soft:#9695A0;
  --sll-copy-light:#FAFAFF;
  --sll-copy-link:#6347EF;

  /* Grises / neutros */
  --sll-gray-0:#FFFFFF;
  --sll-gray-100:#F2F1F3;
  --sll-gray-200:#E3E3E6;
  --sll-gray-300:#C7C6CE;
  --sll-gray-400:#ABAAB5;
  --sll-gray-500:#8F8D9D;
  --sll-gray-600:#737184;
  --sll-gray-700:#565563;
  --sll-gray-800:#3A3942;
  --sll-gray-900:#1D1C21;

  /* Fondos — el design system marca el beige como "confirmar"; se usa gris-100 como fondo sólido en su lugar (nota en el informe de montaje) */
  --sll-bg-page:var(--sll-gray-100);
  --sll-bg-card:var(--sll-gray-0);

  /* Tipografía */
  --sll-font-title:"Work Sans",system-ui,sans-serif;
  --sll-font-body:"Sarabun",system-ui,sans-serif;
}