/* ============================================================
   TOKENS — Tema: grayscale
   Único archivo a reemplazar para cambiar de tema.
   No incluye colores hardcodeados fuera de este bloque.
   ============================================================ */
:root {
  /* Superficies */
  --color-bg:           #f5f5f4;
  --color-surface:      #ffffff;
  --color-surface-alt:  #f1f3f5;
  --color-border:       #dee2e6;
  --color-border-focus: #6c757d;

  /* Texto */
  --color-text-primary:   #1a1a1a;
  --color-text-secondary: #495057;
  --color-text-muted:     #6c757d;
  --color-text-disabled:  #adb5bd;
  --color-text-inverse:   #ffffff;

  /* Acción principal */
  --color-action:         #1a1a1a;
  --color-action-hover:   #000000;
  --color-action-text:    #ffffff;

  /* Acción secundaria */
  --color-action-ghost-border: #dee2e6;
  --color-action-ghost-text:   #495057;

  /* Semánticos (grayscale: sin color real, solo tono) */
  --color-success:        #343a40;
  --color-success-bg:     #e9ecef;
  --color-warning:        #495057;
  --color-warning-bg:     #f1f3f5;
  --color-error:          #1a1a1a;
  --color-error-bg:       #e9ecef;
  --color-info:           #495057;
  --color-info-bg:        #f1f3f5;

  /* Color institucional (placeholder neutral en grayscale) */
  --color-institutional:      #495057;
  --color-institutional-text: #ffffff;

  /* Progreso / etapas */
  --color-step-done:            #1a1a1a;
  --color-step-active:          #1a1a1a;
  --color-step-pending:         #dee2e6;
  --color-step-text-done:       #ffffff;
  --color-step-text-active:     #ffffff;
  --color-step-text-pending:    #adb5bd;

  /* Forma (invariable entre temas) */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-size-xs:  11px;
  --font-size-sm:  13px;
  --font-size-md:  14.5px;
  --font-size-lg:  17px;
  --font-size-xl:  20px;
  --radius-sm:     4px;
  --radius-md:     6px;
  --radius-lg:     8px;
  --shadow-card:   0 4px 12px rgba(0,0,0,.05);
  --shadow-sidebar: 0 4px 12px rgba(0,0,0,.02);
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
}