/* ============================================================
   👥 SOCIOS — Variables RGB  (paleta SUNSET)
   ============================================================ */
:root {
  /* ── Página ─────────────────────────────────────────────── */
  --soc-bg-page:          var(--tok-bg-page);
  --soc-border:           var(--tok-border);

  /* ── Sidebar ────────────────────────────────────────────── */
  --soc-sidebar-bg:       var(--tok-bg-surface);
  --soc-sidebar-text:     var(--tok-text-dark);
  --soc-sidebar-muted:    var(--tok-text-muted);
  --soc-sidebar-hover:    var(--tok-bg-hover);
  --soc-sidebar-active-bg:  var(--tok-warning-bg);
  --soc-sidebar-active-text: var(--tok-warning-text);

  /* ── Footer / Topbar ────────────────────────────────────── */
  --soc-footer-bg:        var(--tok-dark);
  --soc-footer-text:      var(--tok-text-on-dark);

  /* ── Modal ──────────────────────────────────────────────── */
  --soc-modal-overlay:    var(--tok-overlay);
  --soc-modal-bg:         var(--tok-bg-surface);
  --soc-modal-header-from: var(--tok-primary);
  --soc-modal-header-to:   var(--tok-primary-hover);
  --soc-modal-header-text: var(--tok-primary-text);

  /* ── Inputs ─────────────────────────────────────────────── */
  --soc-input-bg:         var(--tok-bg-white);
  --soc-input-border:     var(--tok-border-input);
  --soc-input-focus:      var(--tok-primary);
  --soc-input-text:       var(--tok-text-base);
  --soc-input-placeholder: var(--tok-text-muted);

  /* ── Resultados ─────────────────────────────────────────── */
  --soc-result-hover:        var(--tok-bg-hover);
  --soc-result-active-bg:    var(--tok-bg-selected);
  --soc-result-active-border: var(--tok-primary);

  /* ── Estados ────────────────────────────────────────────── */
  --soc-success-bg:       var(--tok-success-bg);
  --soc-success-text:     var(--tok-success-text);
  --soc-warning-bg:       var(--tok-warning-bg);
  --soc-warning-text:     var(--tok-warning-text);

  /* ── Botones ────────────────────────────────────────────── */
  --soc-btn-gray-bg:      var(--tok-secondary-bg);
  --soc-btn-gray-hover:   var(--tok-secondary-hover);
  --soc-btn-gray-text:    var(--tok-secondary-text);

  --soc-btn-green-bg:     var(--tok-success-bg);
  --soc-btn-green-hover:  var(--tok-success-hover);
  --soc-btn-green-text:   var(--tok-success-text);

  --soc-btn-red-bg:       var(--tok-danger-bg);
  --soc-btn-red-hover:    var(--tok-danger-hover);
  --soc-btn-red-text:     var(--tok-danger-text);

  --soc-btn-primary-bg:   var(--tok-primary);
  --soc-btn-primary-hover: var(--tok-primary-hover);
  --soc-btn-primary-text: var(--tok-primary-text);

  --soc-shadow-modal:     0 25px 50px -12px rgb(0 0 0 / 0.25);

  /* ── Card / Accent ──────────────────────────────────────── */
  --soc-card-bg:          var(--tok-bg-surface);
  --soc-accent:           var(--tok-primary);
  --soc-accent-soft:      var(--tok-primary-soft);
  --soc-accent-very-soft: var(--tok-primary-xsoft);
}